/* ==========================================================================
   SolutionTee — design tokens

   Dark is the canvas the brand is art-directed for. Light exists as a
   working alternate on the same toggle; only the surface roles change.

   Brand: primary #0B1F44 · secondary #2563B3 · accent #F2B233
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ── Brand ────────────────────────────────────────────────────────── */
  --brand-900: #04070d;
  --brand-800: #07101e;
  --brand-700: #0b1f44;   /* PRIMARY */
  --brand-600: #123061;
  --brand-500: #1a4383;
  --brand-400: #2563b3;   /* SECONDARY */
  --brand-300: #4b86d4;

  --accent-700: #8a5f0c;
  --accent-600: #b8830f;
  --accent-500: #f2b233;  /* ACCENT — used sparingly and deliberately */
  --accent-400: #f7c65f;

  /* ── Surfaces ─────────────────────────────────────────────────────── */
  /* Blue, not black. These sit below the primary #0b1f44 on the same hue,
     so the whole canvas reads as brand navy in shadow rather than as a
     neutral dark theme that happens to carry a blue logo. */
  --bg: #050f22;
  --bg-raised: #0a1a36;
  --bg-panel: #0e2245;
  --overlay: rgba(5, 15, 34, 0.78);
  --scrim: rgba(5, 15, 34, 0.55);
  /* The "where next" panels: a hue wash over the photograph, then a fade to
     the page so the type has ground under it. */
  --path-wash: rgba(11, 31, 68, 0.55);
  --path-fade: #050f22;

  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-strong: rgba(255, 255, 255, 0.18);

  /* Off-white, not pure white: #fff on near-black glares at large sizes. */
  --text: #eef1f7;
  --text-muted: #9aa6b8;
  --text-dim: #6a778c;
  --text-inverse: #050f22;

  /* ── The mark ─────────────────────────────────────────────────────── */
  /* One set of tokens for every place the logo appears. On a dark sheet the
     navy runs would disappear into the background, so the trace lifts to the
     light ink; the amber node is the one thing that never moves, because it
     reads on either. */
  --mark-trace: #eef1f7;
  --mark-blue: #2563b3;
  --mark-amber: #f2b233;

  --accent-ink: var(--accent-500);
  --focus: var(--accent-500);
  --danger: #ff6b7f;
  --success: #3ddc9a;

  /* ── Type ─────────────────────────────────────────────────────────── */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;

  /* A proper editorial scale. The display steps are sized against the column
     they sit in, not the viewport, so a headline never outgrows its measure
     at an in-between width. */
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.15rem, 0.5vw + 1rem, 1.375rem);
  --fs-xl: clamp(1.4rem, 1vw + 1.15rem, 1.9rem);
  --fs-2xl: clamp(1.8rem, 2vw + 1.2rem, 2.8rem);
  --fs-3xl: clamp(2.2rem, 3.4vw + 1rem, 4.2rem);
  --fs-4xl: clamp(2.6rem, 5vw + 1rem, 6rem);
  /* Hero and philosophy only. Nothing else reaches these. */
  --fs-hero: clamp(3.75rem, 7.6vw, 8rem);
  --fs-mega: clamp(3rem, 13vw, 13rem);

  --lh-tight: 0.92;
  --lh-snug: 1.15;
  --lh-body: 1.6;
  --track-tight: -0.035em;
  --track-wide: 0.18em;

  /* ── Space ────────────────────────────────────────────────────────── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 9rem;
  /* One consistent vertical rhythm.
     Measured before changing: 11vw gave 158px of padding at the top AND
     bottom of every section — 317px of dead space between each pair, close
     to 3,000px down the page. Generous should mean room to breathe, not a
     screen of nothing between every heading. */
  --section-y: clamp(3rem, 5vw, 5.5rem);

  --radius: 2px;          /* effectively square; enough to avoid a raw edge */

  /* ── Motion ───────────────────────────────────────────────────────── */
  /* One expressive curve, used almost everywhere. Restrained and fast is
     what reads as expensive; linear reads as cheap. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 620ms;
  /* 900ms across three dozen elements reads as lag, not luxury. */
  --dur-reveal: 520ms;

  /* ── Layout ───────────────────────────────────────────────────────── */
  --container: 1440px;
  --measure: 62ch;
  --nav-h: 80px;
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --gutter-safe: max(
    var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)
  );

  /* The drawer sits BELOW the bar. Above it, the panel covered the very
     button you need to press to close it — the cross was rendering behind
     the menu it was meant to dismiss. It still covers the page, because
     nothing in the page carries a stacking order of its own. */
  --z-drawer: 700;
  --z-nav: 800;
  --z-lightbox: 1000;
  --z-cursor: 1100;
}

/* ── Light alternate ────────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f6fa;
  --bg-raised: #ffffff;
  --bg-panel: #ffffff;
  --overlay: rgba(244, 246, 250, 0.75);
  --scrim: rgba(5, 15, 34, 0.35);

  --hairline: rgba(11, 31, 68, 0.12);
  --hairline-strong: rgba(11, 31, 68, 0.24);

  --text: #0b1f44;
  --text-muted: #4a5f83;
  --text-dim: #74839c;
  --text-inverse: #ffffff;

  --mark-trace: #0b1f44;

  /* Light needs the opposite treatment: a light wash and a fade to the page
     colour, or the panel reads as a grey smear over the photograph. */
  --path-wash: rgba(244, 246, 250, 0.5);
  --path-fade: #f4f6fa;

  /* Bright amber measures about 1.8:1 on a near-white sheet — a fill, never
     a label. Anything that carries meaning as text uses the deep step. */
  --accent-ink: #8a5f0c;
  --focus: #b8830f;
  --danger: #c2334a;
  --success: #167a52;
}