/* ==========================================================================
   Design tokens — the single source of truth for the Slipstream system.
   Change values here, never in component files.

   THEMING
   Light is the base theme. Dark applies in two cases:
     1. the visitor's OS asks for it and they have not chosen otherwise
     2. the visitor picks it explicitly (data-theme="dark" on <html>)
   An explicit data-theme always wins over the OS preference, in both
   directions. Only the semantic tokens are redefined per theme — brand and
   scale values are declared once.
   ========================================================================== */

:root {
  /* --- Brand (theme-independent) ---------------------------------------- */
  --c-black: #050505;
  --c-white: #f5f5f5;
  --c-blue: #2563ff;

  --c-blue-bright: #4a7dff; /* blue that is legible as text on dark */
  --c-blue-deep: #1b46b8; /* blue that is legible as text on light */

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* Fluid scale. Clamped so nothing breaks at 320px or 2560px.
     Preferred values use vw so type scales with the viewport, with rem in the
     mix to stay zoom-accessible (WCAG 1.4.4). */
  --t-xs: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
  --t-sm: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
  --t-base: clamp(0.9375rem, 0.9rem + 0.19vw, 1.0625rem);
  --t-md: clamp(1.0625rem, 0.98rem + 0.42vw, 1.375rem);
  --t-lg: clamp(1.25rem, 1.05rem + 1vw, 2rem);
  --t-xl: clamp(1.75rem, 1.3rem + 2.25vw, 3.25rem);
  --t-2xl: clamp(2.25rem, 1.4rem + 4.25vw, 5rem);

  /* Display sizes intentionally run to the edge of the viewport.

     --t-4xl is bounded by a real constraint, not taste: the longest word in
     the hero is "EXPERIENCES." at 6.16em (measured in Space Grotesk 700,
     including the -0.035em tracking). With a 5vw gutter either side, a pure
     13.3vw ramp keeps that word inside the line at every width from 320px
     up — so the headline never breaks mid-word. Do not add a rem offset
     here; that is what pushed it over on phones. */
  --t-3xl: clamp(2.75rem, 1.1rem + 8.2vw, 8rem);

  /* --t-4xl is bounded by TWO real constraints, not taste:

     Width — the longest hero word is "EXPERIENCES." at 6.16em (measured in
     Space Grotesk 700, including the -0.035em tracking). An 11vw ramp keeps
     it inside the line at every width from 320px up, so the headline never
     breaks mid-word. Do not add a rem offset; that is what pushed it over
     on phones.

     Height — the hero has to hold a three-line headline, the lead AND the
     CTAs above the fold. On a short window (a laptop with lots of browser
     chrome) a purely width-based size pushed the buttons 200px below it.
     The 14vh term makes the type yield to the viewport instead. */
  --t-4xl: clamp(2.6rem, min(11vw, 16vh), 11rem);

  --lh-tight: 0.92;
  --lh-snug: 1.08;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --track-tight: -0.035em;
  --track-snug: -0.02em;
  --track-normal: 0;
  --track-wide: 0.08em;
  --track-wider: 0.18em;

  /* --- Space ------------------------------------------------------------ */
  --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;

  --section-y: clamp(4.5rem, 10vw, 11rem);
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 90rem;
  --maxw-text: 46ch;

  /* --- Motion ----------------------------------------------------------- */
  /* --ease-out-expo is the house curve: fast start, long settle — reads as
     "precise" rather than "bouncy". */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1);

  --d-fast: 160ms;
  --d-base: 280ms;
  --d-slow: 560ms;
  --d-slower: 780ms;
  --d-intro: 1100ms;

  /* --- Layers ----------------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-menu: 200;
  /* Nav sits ABOVE the menu overlay: the toggle becomes the close button, so
     it has to stay visible and clickable while the menu is open. */
  --z-nav: 300;
  --z-intro: 900;
  --z-skip: 1000;

  --nav-h: clamp(4rem, 7vw, 5.5rem);
  --border-w: 1px;
}

/* ==========================================================================
   LIGHT THEME — the default
   ========================================================================== */
:root {
  color-scheme: light;

  --bg: var(--c-white);
  --bg-raised: #ffffff;
  --bg-sunken: #ebebee;

  --fg: var(--c-black);
  --fg-muted: #4d4d57;
  --fg-faint: #6a6a76;

  --accent: var(--c-blue);
  /* Blue that is safe as small text on this background. --accent is for
     fills and rules only; it does not clear 4.5:1 on light. */
  --accent-text: var(--c-blue-deep);

  --rule: #d2d2d8;
  --rule-faint: #e3e3e7;
  /* Borders forming a control's visible boundary must clear 3:1 (WCAG
     1.4.11). Decorative hairlines use --rule / --rule-faint. */
  --rule-interactive: #85858e;

  /* Logo plate. Always the current theme's own surface, so the plate reads
     as part of the page rather than a card. Each client logo ships a
     matching per-theme variant (see tools/build-logo-variants.py). */
  --plate-core: #ffffff;
  --plate-edge: #efeff2;

  --btn-primary-fg: #ffffff;

  --c-error: #c0261e;
  --c-success: #10794a;

  /* Faint technical grid in the hero. */
  --grid-line: #dedee3;
  --grid-opacity: 0.9;

  /* Ambient hero field. On light, tinted blue only — a dark haze on a light
     page reads as a smudge rather than a glow. */
  --field-a: color-mix(in srgb, var(--c-blue) 20%, transparent);
  --field-a-mid: color-mix(in srgb, var(--c-blue) 8%, transparent);
  --field-b: color-mix(in srgb, var(--c-blue) 11%, transparent);
  --field-b-mid: color-mix(in srgb, var(--c-blue) 4%, transparent);
  --field-c: color-mix(in srgb, var(--c-blue) 13%, transparent);
}

/* ==========================================================================
   DARK THEME
   Applied when the OS asks and the visitor has not pinned light…
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --bg: var(--c-black);
    --bg-raised: #0a0a0b;
    --bg-sunken: #000000;

    --fg: var(--c-white);
    --fg-muted: #9a9aa4;
    --fg-faint: #7e7e88;

    --accent: var(--c-blue);
    --accent-text: var(--c-blue-bright);

    --rule: #2a2a2f;
    --rule-faint: #1a1a1d;
    --rule-interactive: #616169;

    --plate-core: #17171a;
    --plate-edge: #0a0a0b;

    --btn-primary-fg: #ffffff;

    --c-error: #ff5a52;
    --c-success: #3ddc84;

    --grid-line: #121214;
    --grid-opacity: 0.5;

    /* On dark, a white secondary field reads as light rather than dirt. */
    --field-a: color-mix(in srgb, var(--c-blue) 30%, transparent);
    --field-a-mid: color-mix(in srgb, var(--c-blue) 13%, transparent);
    --field-b: color-mix(in srgb, #ffffff 9%, transparent);
    --field-b-mid: color-mix(in srgb, #ffffff 3%, transparent);
    --field-c: color-mix(in srgb, var(--c-blue) 18%, transparent);
  }
}

/* …and whenever the visitor picks it explicitly, regardless of the OS. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: var(--c-black);
  --bg-raised: #0a0a0b;
  --bg-sunken: #000000;

  --fg: var(--c-white);
  --fg-muted: #9a9aa4;
  --fg-faint: #7e7e88;

  --accent: var(--c-blue);
  --accent-text: var(--c-blue-bright);

  --rule: #2a2a2f;
  --rule-faint: #1a1a1d;
  --rule-interactive: #616169;

  --plate-core: #17171a;
  --plate-edge: #0a0a0b;

  --btn-primary-fg: #ffffff;

  --c-error: #ff5a52;
  --c-success: #3ddc84;

  --grid-line: #121214;
  --grid-opacity: 0.5;

  --field-a: color-mix(in srgb, var(--c-blue) 30%, transparent);
  --field-a-mid: color-mix(in srgb, var(--c-blue) 13%, transparent);
  --field-b: color-mix(in srgb, #ffffff 9%, transparent);
  --field-b-mid: color-mix(in srgb, #ffffff 3%, transparent);
  --field-c: color-mix(in srgb, var(--c-blue) 18%, transparent);
}

/* While the visitor is switching themes we suppress transitions for one
   frame, so the whole page does not cross-fade every colour at once. */
:root[data-theme-switching] *,
:root[data-theme-switching] *::before,
:root[data-theme-switching] *::after {
  transition: none !important;
}