/* AirportTransfers.ai — design tokens
   Source of truth: brand/DESIGN.md
   Dark-first. Light mode is secondary (guides, long-form, print). */

:root {
  /* ---- Ground & surface (dark, default) ---- */
  --ink-900: #0B0A09;
  --ink-800: #121110;
  --ink-700: #1A1817;
  --ink-600: #232120;
  --ink-500: #2E2B29;

  /* ---- Text ----
     text-low must clear 4.5:1 on the LIGHTEST dark ground it ever sits on,
     which is --surface-in (#232120) inside .field. The old #7D766C measured
     3.57:1 there and failed AA on every ground. */
  --text-hi:  #F5F1EA;
  --text-mid: #B8B0A4;
  --text-low: #948C80;   /* 4.83:1 on #232120 · 5.95:1 on #0B0A09 */

  /* ---- Accent ---- */
  --champagne-400: #E8D2A6;
  --champagne-500: #D9BE8A;
  --champagne-600: #C2A46B;
  --champagne-700: #8A7346;

  /* ---- Struck gold: interactive and active states only ----
     The CTA metal. Warmer and more saturated than champagne, which stays
     decorative (eyebrows, rules, brand marks). */
  --gold-300: #F8E6A6;
  --gold-400: #E7C65C;
  --gold-500: #C8A032;
  --gold-700: #96731C;
  --gold-grad: linear-gradient(180deg, #F8E6A6 0%, #E7C65C 56%, #C8A032 100%);

  /* ---- Semantic (never decorative) ---- */
  --jade-500:  #4CAF7D;
  --alert-500: #D9704F;

  /* ---- Roles ---- */
  --page:        var(--ink-900);
  --section:     var(--ink-800);
  --surface:     var(--ink-700);
  --surface-in:  var(--ink-600);
  --line:        var(--ink-500);      /* decorative dividers only — 1.26:1, never a control edge */
  --line-strong: #736C63;             /* interactive borders — 3.4:1, meets WCAG 1.4.11 */
  --line-accent: var(--champagne-700);
  --focus:       var(--champagne-400);
  --accent:      var(--champagne-500);
  --accent-hi:   var(--champagne-400);
  --accent-lo:   var(--champagne-600);
  --on-accent:   var(--ink-900);

  /* ---- Type families ---- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-op: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  /* ---- Type scale ---- */
  --display-xl: 76px;  --display-xl-lh: 0.94;  --display-xl-ls: -0.03em;
  --display-l:  52px;  --display-l-lh:  1.0;   --display-l-ls:  -0.02em;
  --display-m:  36px;  --display-m-lh:  1.1;   --display-m-ls:  -0.015em;
  --title:      22px;  --title-lh:      1.3;   --title-ls:      -0.01em;
  --eyebrow:    12px;  --eyebrow-lh:    1.2;   --eyebrow-ls:    0.16em;
  --body-l:     18px;  --body-l-lh:     1.6;
  --body:       16px;  --body-lh:       1.65;
  --caption:    13px;  --caption-lh:    1.45;
  --data-l:     28px;  --data-l-lh:     1.1;   --data-l-ls:     -0.01em;
  --data:       15px;  --data-lh:       1.4;
  --data-s:     12px;  --data-s-lh:     1.3;   --data-s-ls:     0.02em;

  /* ---- Space ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 120px;

  --container: 1240px;
  --gutter: 48px;
  --grid-gap: 24px;
  --section-rhythm: 120px;
  --block-rhythm: 48px;

  /* ---- Shape ---- */
  --radius-s: 4px;
  /* Buttons. Every .btn reads --btn-h / --btn-px / --btn-gap / --btn-fs; variants and the size modifier only
     swap these tokens on the element, so stylesheet order never decides a size. One height for every
     standalone button, form submits and the checkout pay bar included (56); .btn--s (44) is header chrome only.
     Gold (.hv-cta): 18px label, 32px sides, 8px label-to-arrow. Ghost and WhatsApp green: 22px sides, 9px gap,
     and 18px on the icon side when an icon leads. */
  --btn-h: 56px;
  --btn-h-s: 44px;
  --btn-px: 24px;
  --btn-px-cta: 32px;
  --btn-px-ghost: 22px;
  --btn-px-icon: 18px;
  --btn-px-s: 16px;
  --btn-px-float: 18px;
  --btn-gap: 10px;
  --btn-gap-cta: 8px;
  --btn-gap-ghost: 9px;
  --btn-gap-s: 8px;
  --btn-fs-cta: var(--body-l);
  /* Round icon buttons (.icon-btn): photo arrows, expand, lightbox close. One size. */
  --icon-btn: 40px;
  /* Fields (.cell in ui.css, and the home booking cells): label inside a 68px cell (64px when cells are joined
     in one row), 11px mono caps label, gold border + 3px soft glow on focus. */
  --field-h: 68px;
  --field-h-joined: 64px;
  --field-label: 11px;
  --field-label-ls: .14em;
  --field-radius: 6px;
  --field-ring: 0 0 0 3px rgba(200, 160, 50, .18);
  --radius-m: 8px;
  --radius-l: 14px;
  --radius-full: 999px;
  --border: 1px;

  /* ---- Depth (used sparingly — hairlines do the work) ---- */
  --shadow-l: 0 24px 64px rgba(0, 0, 0, .55);
  --scrim: linear-gradient(to top, var(--ink-900) 0%, rgba(11, 10, 9, .55) 35%, transparent 70%);

  /* ---- Motion ---- */
  /* The owner's rule (2026-10-08): quad curves only, never ease-in-out. Ease-out quad for anything arriving or
     changing in place, ease-in quad for anything leaving. Small travel, no blur, nothing busy. */
  --ease-out-quad: cubic-bezier(.5, 1, .89, 1);
  --ease-in-quad: cubic-bezier(.11, 0, .5, 0);
  --ease: var(--ease-out-quad);
  --dur-fast: 120ms;
  --dur: 200ms;
  /* ---- Motion: fluid (the default) ----
     Opening/entering: --ease-fluid over --fluid-in. Closing/leaving: --ease-exit over --fluid-out (ease-in quad, kept
     short: it holds still at first, so a long one feels late). In-place state changes (a card taking focus):
     --ease-glide or --ease-quad over --glide. Travel stays small: fade + a drift of <=8px or a scale of >=.97, a
     30-40ms stagger on lists. */
  --ease-fluid: var(--ease-out-quad);
  --fluid-in: 640ms;
  --ease-glide: var(--ease-out-quad);
  --ease-exit: var(--ease-in-quad);
  --ease-quad: var(--ease-out-quad);
  /* Endless back-and-forth loops only (photo drift, the walking figure): an ease-out loop would bounce at one end. */
  --ease-loop: cubic-bezier(.45, 0, .55, 1);
  --glide: 700ms;
  --fluid-out: 340ms;
  --stagger: 40ms;      /* delay between items of a list arriving one after another */
  /* Specular sweep: the one-shot light band across .hv-cta on hover (also paces the ambient .hv-rail shimmer). */
  --ease-sweep: cubic-bezier(.35, 0, .3, 1);
  --sweep: 1.15s;
  /* Pinned on purpose, outside the quad rule: the gold CTA (.hv-cta) and the floating buttons' fade keep the curves
     they were approved with. Only those two read these. */
  --ease-pinned-in: cubic-bezier(.22, 1, .36, 1);
  --ease-pinned-out: cubic-bezier(.4, 0, .2, 1);
  /* ---- Legacy spring names ----
     Older rules still say --spring-smooth / -snappy / -bouncy. They now resolve to the calm curves, with no
     overshoot anywhere: all three are the ease-out quad. Gesture hand-off springs live in JS (window.__atMotion,
     critically damped). New rules use the fluid tokens above. */
  --spring-smooth: var(--ease-fluid);
  --spring-smooth-dur: var(--fluid-in);
  --spring-snappy: var(--ease-glide);
  --spring-snappy-dur: 600ms;
  --spring-bouncy: var(--ease-glide);
  --spring-bouncy-dur: 600ms;
}

/* Light mode — secondary surface for guides and print.
   Opt in with data-theme="light"; the site itself is dark-first. */
:root[data-theme="light"] {
  --page:       #FAF7F2;
  --section:    #F2EDE4;
  --surface:    #FFFFFF;
  --surface-in: #FFFFFF;
  --line:       #E0D8CB;
  --line-strong: #A79C8B;
  --line-accent: var(--champagne-700);

  --text-hi:  #14120F;
  --text-mid: #4A443C;
  --text-low: #6B6459;   /* darkened from #857D71, which failed AA on ivory */

  /* champagne-500 fails contrast on ivory — accent text steps down */
  --accent:    var(--champagne-700);
  --accent-hi: var(--champagne-600);
  --on-accent: #FFFFFF;
}

@media (max-width: 1024px) {
  :root {
    --section-rhythm: 96px;
    --gutter: 32px;
  }
}

@media (max-width: 640px) {
  :root {
    --display-xl: 40px; --display-xl-lh: 1.02;
    --display-l:  32px;
    --display-m:  26px;
    --data-l:     24px;
    --section-rhythm: 72px;
    --gutter: 24px;
  }
}