/* ==========================================================================
   tokens.css — design tokens (single source of truth)

   DARK ONLY. There is no light theme and no `prefers-color-scheme` branch:
   the page ships one surface. Do not reintroduce a `[data-theme]` selector —
   every value below is already the dark value.

   Shenzhen Access v1 palette: Futurewave's own black/white + subtle purple
   gradient, extended with one accent of its own (copper), re-derived for a
   near-black ground.

   Semantic variables (--c-*, --t-*, --s-*, --r-*, --shadow-*, --dur-*,
   --ease, --z-*) are what base.css and layout.css consume — kept stable so
   this file can evolve without touching component CSS. Raw brand values
   (--color-*, --gradient-fw-accent, --font-voice, --photo-*)
   are exposed directly for anywhere a component wants the un-mapped value.

   Contrast ratios in the comments are measured against --c-bg (#17161A)
   unless stated otherwise. Floor from docs/page-plan.md: body text >= 4.5:1,
   large text >= 3:1, interactive boundaries >= 3:1 (WCAG 1.4.11).
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Raw brand palette -------------------------------------------- */
  --color-ink:            #121114;  /* retained for reference: the light-theme near-black */
  --color-paper:          #FAF9F6;  /* retained for reference: the light-theme warm white */
  --color-slate:          #6E6D72;
  --color-hairline:       #E7E4DE;

  --color-fw-accent-start: #707EA0;
  --color-fw-accent-end:   #D7B7C8;
  --gradient-fw-accent: linear-gradient(135deg, var(--color-fw-accent-start), var(--color-fw-accent-end));
  /* Use sparingly: eyebrow underlines, focus rings, pill borders, link hover.
     Never as a large fill — this is a whisper, matching futurewave.eu.
     On the dark ground both stops read as mid-tones: fine for a 1px edge or a
     gradient wash, never for text. */

  --color-copper:      #C1703C;  /* the light-theme accent — 4.85:1 here. See --c-accent. */
  --color-copper-lift: #E08A52;  /* the dark-theme accent — 6.80:1 */
  --color-copper-hi:   #EFA06B;  /* hover — 8.50:1 */

  /* --- Ground ----------------------------------------------------------- */
  /* Warm near-black, not pure black: #000 crushes the shadow end of any
     photograph laid on it and makes off-white text vibrate. This carries a
     touch of the brand's violet so the copper accent sits warm against it. */
  --c-bg:             #17161A;
  --c-bg-subtle:      #1C1B20;  /* alternating section bands */
  --c-bg-hover:       #26252B;  /* row / summary hover — a 1.19:1 step off --c-bg */
  --c-bg-deep:        #101015;  /* deeper panel, replaces the old light-theme inverse */
  --c-surface:        #232228;  /* cards — lifts off both --c-bg and --c-bg-subtle */
  --c-bg-inverse:     var(--c-bg-deep);

  /* --- Lines ------------------------------------------------------------ */
  /* Three weights, because one hairline cannot do all three jobs on dark:
     a card outline that should barely register, a divider that carries
     structure, and a control boundary that WCAG 1.4.11 requires at 3:1. */
  --c-border:         #3A3941;  /* 1.58:1 — card + pill outlines, decorative */
  --c-divider:        #4E4C56;  /* 2.14:1 — itinerary rows, FAQ rules, footer, table hairlines */
  --c-border-strong:  #706E79;  /* 3.60:1 vs --c-bg, 3.15:1 vs --c-surface — inputs, buttons */

  /* --- Text ------------------------------------------------------------- */
  /* Off-white, not #FFF: pure white on near-black haloes at body sizes. */
  --c-ink:            #EDEBE6;  /* 15.12:1 */
  --c-ink-muted:      #B5B2AC;  /*  8.51:1 — body copy in .muted / .lead */
  --c-ink-faint:      #8F8C85;  /*  5.36:1 vs --c-bg, 4.70:1 vs --c-surface (its worst case) */
  --c-ink-inverse:    var(--c-bg);  /* text on a light chip, e.g. the skip link */

  /* --- Brand / accent --------------------------------------------------- */
  /* The accent belongs to the Futurewave gradient rather than being an invented
     copper. It is not either stop verbatim: --color-fw-accent-end (#D7B7C8) is
     only 29% saturated and reads as grey-pink at 1px and in small text. This
     sits at 55% on hue 275 — lavender, travelling from the gradient's warm stop
     (328) toward its cool one (222) rather than sitting on either. Lightness is
     held at the warm stop's 78%, which is what keeps the contrast.

     It measures better than the copper it replaces on every surface —
     8.84:1 vs --c-bg, 7.75:1 vs --c-surface (its worst case) — so nothing that
     cleared the floor before falls below it now.

     Note this overrides the warning above --gradient-fw-accent that the stops
     are mid-tones fit only for a 1px edge. That is true of --color-fw-accent-start
     (#707EA0, 4.44:1 — no headroom, and the reason it is not the accent here).
     The warm stop is light enough to carry text and to take --c-accent-ink on a
     fill. The "never as a large fill" rule still stands for the gradient itself.

     The copper values are retained above as raw brand tokens; nothing consumes
     them now. Restore by pointing the two lines below back at them. */
  --c-accent:         #CCA8E6;  /* 8.84:1 vs --c-bg, 7.75:1 vs --c-surface */
  --c-accent-hover:   #DFC8EF;  /* one step lighter — 11.70:1 */
  --c-accent-soft:    #2D2235;  /* focus glow / tint fill only, never text */
  --c-accent-ink:     #17161A;  /* text on an accent fill — 8.84:1 against it */

  /* --- Status ----------------------------------------------------------- */
  /* All three re-derived. The light-theme values (#1F7A4D, #A9650B, #B32318)
     sat at 1.6-2.5:1 on this ground — they would have gone effectively
     invisible in a straight recolour. */
  --c-success:        #5FCB92;  /* 8.96:1 */
  --c-warning:        #E0B155;  /* 9.08:1 */
  --c-error:          #E8695F;  /* 5.67:1 */

  /* --- Typography ------------------------------------------------------- */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif; /* headline emphasis, italic use only */
  --font-voice:   var(--font-serif);
  --font-mono:    "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* eyebrows, day-labels, pills, hero dates */
  /* --font-wordmark removed: the trip-name lockup is SVG outlines, so Space
     Grotesk was requested on every load and never drawn. */

  /* Fluid type scale — clamp(min, preferred, max) */
  --t-display:  clamp(2.75rem, 1.6rem + 5.2vw, 5.5rem);
  --t-h1:       clamp(2.25rem, 5vw, 3.5rem);
  --t-h2:       clamp(2rem, 1.4rem + 2vw, 2.75rem);
  --t-h3:       1.25rem;
  --t-lead:     1.125rem;
  --t-body:     1rem;
  --t-small:    0.9375rem;
  --t-caption:  0.8125rem;

  --lh-tight:   1.15;
  --lh-snug:    1.25;
  --lh-body:    1.6;

  --ls-tight:   -0.022em;
  --ls-wide:     0.08em;

  /* --- Space scale (4px base) ------------------------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  /* --- Layout ----------------------------------------------------------- */
  --w-page:     1200px;  /* max container width */
  --w-prose:    68ch;    /* comfortable reading measure */
  --gutter:     clamp(1.25rem, 4vw, 3rem);
  --section-y:  clamp(3.5rem, 8vw, 7rem);
  --h-header:   4.25rem; /* must match .site-header__inner min-height — the hero subtracts it */

  /* --- Radii / borders / elevation -------------------------------------- */
  --r-sm:  0.25rem;
  --r-md:  0.5rem;
  --r-lg:  0.75rem;
  --r-xl:  24px;
  --r-pill: 999px;

  /* Shadows do almost no work on a dark ground — separation comes from
     --c-surface lifting and --c-border. Kept deep so they read at all. */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.45);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.50);
  --shadow-lg: 0 18px 40px rgb(0 0 0 / 0.60);

  /* --- Motion ----------------------------------------------------------- */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   140ms;
  --dur:        240ms;
  --dur-slow:   480ms;

  /* --- Z-index ---------------------------------------------------------- */
  --z-header: 100;
  --z-modal:  200;

  /* --- Photo treatment (reference values for image processing/CSS filter) */
  /* On dark, the grade also needs its black point lifted, or photographs
     silhouette into the background. See assets/img/README.md. */
  --photo-saturate: 0.7;
  --photo-grain-opacity: 0.04;
}

/* Optional CSS-only approximation of the photo treatment for <img> tags,
   until images are pre-graded in post-production:
   .photo-treated { filter: saturate(var(--photo-saturate)) contrast(1.02); }
*/

/* Contained frame for any photograph that arrives on a light or white
   background — without it, a light-backed shot reads as a cutout floating on
   the page. See assets/img/README.md for which assets need this. */
.photo-frame {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg-deep);
  overflow: hidden;
}