/* ==========================================================================
   Emar Cars Tenerife — booking page tokens  (v2, "book-a-car-now")
   One skeleton, mobile-first. Conventional car-rental UX on purpose.
   Imported by index.html; also the source of truth for the Rails port.
   ========================================================================== */

:root {
  /* ---- colour roles ------------------------------------------------- */
  --bg:            #FFFFFF;   /* page */
  --bg-soft:       #F4F7F6;   /* chip rail, alternating bands, sheets */
  --bg-sink:       #ECF1F0;   /* pressed chip, image plate */
  --ink:           #10201E;   /* headings + body — 15.9:1 on white */
  --ink-2:         #33413F;   /* card body text — 9.6:1 */
  --muted:         #5B6B69;   /* secondary — 5.4:1 on white */
  --line:          #DCE3E2;   /* hairlines, card borders, dividers */
  --line-2:        #C3CECC;   /* hover borders, input borders */

  --brand:         #0B564E;   /* deep teal — booking panel, primary CTA */
  --brand-dark:    #07403A;   /* hover / active */
  --brand-ink:     #FFFFFF;   /* text on brand — 9.4:1 */
  --brand-soft:    #E4EFEC;   /* selected chip, quiet fills */
  --brand-line:    #1E6D63;   /* dividers inside the brand panel */

  --money:         #B23A0C;   /* discounted price + badge — 5.1:1 on white */
  --money-ink:     #FFFFFF;   /* text on the badge */
  --star:          #E8A33D;   /* rating stars only */

  /* ---- type ----------------------------------------------------------- */
  --font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-11:  0.6875rem;
  --t-12:  0.75rem;
  --t-13:  0.8125rem;
  --t-14:  0.875rem;
  --t-15:  0.9375rem;
  --t-16:  1rem;
  --t-18:  1.125rem;
  --t-20:  1.25rem;
  --t-24:  1.5rem;
  --t-h2:  clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --t-h1:  clamp(1.6rem,  1.15rem + 2.1vw, 2.75rem);

  /* ---- space ---------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px; --s-10: 96px;

  /* ---- shape ---------------------------------------------------------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-pill: 999px;

  --sh-panel: 0 12px 30px -14px rgba(7, 64, 58, .55);
  --sh-bar:   0 6px 18px -10px rgba(16, 32, 30, .40);
  --sh-card:  0 8px 22px -16px rgba(16, 32, 30, .55);
  --sh-sheet: 0 -18px 40px -20px rgba(16, 32, 30, .45);

  /* ---- layout --------------------------------------------------------- */
  --shell:        1320px;
  --hdr-h:        56px;   /* full header */
  --hdr-h-min:    48px;   /* compact header, after scroll */
  --focus:        2px solid var(--brand);
  --focus-offset: 2px;
}

/* --- v3 additions: range-filter widget ---------------------------------- */
:root {
  --rf-track:  var(--bg-sink);
  --rf-fill:   var(--brand);
  --rf-thumb:  #FFFFFF;
  --rf-rail-h: 36px;
  --rf-thumb-d: 22px;

  --sbar-cell-h:     44px;   /* mobile search-bar cell */
  --sbar-cell-h-lg:  56px;   /* desktop */
}