/* ============================================================
   Design tokens — colors, typography, spacing, motion
   The site is single-mode (light). The hero scopes its subtree to
   the dark palette via the .theme-dark class defined below.
   ============================================================ */

:root {
  /* ─────────────────────────────────────────────
     COLOR
     ───────────────────────────────────────────── */
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --fg: #050505;
  --fg-dim: rgba(10, 10, 10, 0.55);
  --fg-mute: rgba(10, 10, 10, 0.38);
  --line: rgba(10, 10, 10, 0.08);
  --line-soft: rgba(10, 10, 10, 0.04);
  --card-dark: #0a0a0a;
  --card-light: #f4f4f2;
  --accent: #0a0a0a;
  --hot: #ff4a1c;

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — families
     ───────────────────────────────────────────── */
  --font-sans: 'Strawford', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Legacy aliases — kept so existing `var(--display)` / `var(--body)` consumers
     keep working until they're migrated to var(--font-sans). */
  --display: var(--font-sans);
  --body: var(--font-sans);
  --mono: var(--font-mono);

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — weights (collapse 300/350/400/450/500 → 3 weights)
     ───────────────────────────────────────────── */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — fluid type scale
     Floor (mobile) → preferred (vw + offset) → ceiling (desktop).
     Floors and ceilings sit on the 8pt grid where typography permits.
     ───────────────────────────────────────────── */
  --text-eyebrow: 11px;                              /* mono labels   */
  --text-caption: 12px;                              /* meta          */
  --text-sm:      14px;                              /* small body    */
  --text-base:    16px;                              /* body          */
  --text-md:      clamp(16px, 0.4vw + 14.5px, 18px); /* body large    */
  --text-lg:      clamp(18px, 0.6vw + 16px, 22px);   /* lede / quote  */
  --text-xl:      clamp(20px, 1vw + 16px, 24px);     /* H4            */
  --text-2xl:     clamp(24px, 1.5vw + 18px, 32px);   /* H3            */
  --text-3xl:     clamp(28px, 2.5vw + 18px, 40px);   /* H2 small      */
  --text-4xl:     clamp(36px, 4vw + 18px, 56px);     /* H2            */
  --text-5xl:     clamp(48px, 6vw + 16px, 72px);     /* H1            */
  --text-6xl:     clamp(64px, 8vw + 16px, 96px);     /* display       */
  --text-mega:    clamp(72px, 10vw + 16px, 128px);   /* hero / case   */

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — line heights (collapse ~16 → 4)
     ───────────────────────────────────────────── */
  --lh-tight:   1;     /* mega display          */
  --lh-snug:    1.1;   /* headlines             */
  --lh-normal:  1.2;   /* sub-headlines         */
  --lh-relaxed: 1.5;   /* body / paragraphs     */

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — letter spacing (collapse 12+ → 5)
     ───────────────────────────────────────────── */
  --ls-tightest: -0.04em;   /* large displays                */
  --ls-tight:    -0.025em;  /* headlines                     */
  --ls-snug:     -0.01em;   /* small body, buttons           */
  --ls-normal:    0;        /* body                          */
  --ls-wide:      0.08em;   /* eyebrow / mono uppercase      */

  /* ─────────────────────────────────────────────
     SPACING — 8pt grid
     Use multiples of 8 by default; 4 only when visually needed.
     ───────────────────────────────────────────── */
  --space-0:   0;
  --space-1:   4px;     /* half-step — sparingly */
  --space-2:   8px;
  --space-3:   12px;    /* small UI half-step    */
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   40px;
  --space-8:   48px;
  --space-9:   64px;
  --space-10:  80px;
  --space-11:  96px;
  --space-12:  128px;
  --space-13:  160px;

  /* ─────────────────────────────────────────────
     RADIUS
     ───────────────────────────────────────────── */
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ─────────────────────────────────────────────
     SHADOWS
     ───────────────────────────────────────────── */
  --shadow-sm: 0 1px 0 0 color-mix(in srgb, var(--fg) 6%, transparent);
  --shadow-md: 0 8px 24px -12px color-mix(in srgb, var(--fg) 18%, transparent);
  --shadow-lg:
    0 1px 0 0 color-mix(in srgb, var(--fg) 6%, transparent),
    0 30px 80px -40px color-mix(in srgb, var(--fg) 20%, transparent);

  /* ─────────────────────────────────────────────
     Z-INDEX
     ───────────────────────────────────────────── */
  --z-base:        1;
  --z-overlay:    10;
  --z-nav:        50;
  --z-tweaks:     80;
  --z-modal:     100;
  --z-transition: 200;

  /* ─────────────────────────────────────────────
     CONTAINER WIDTHS
     ───────────────────────────────────────────── */
  --container-narrow:  720px;
  --container-md:     1080px;
  --container-wide:   1320px;
  --container-full:   1480px;

  /* ─────────────────────────────────────────────
     MOTION — durations + easing
     ───────────────────────────────────────────── */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --t-fast:   150ms;
  --t-base:   250ms;
  --t-slow:   400ms;

  --motion: 1;
}

/* Scoped dark palette — apply .theme-dark to any container (e.g. the
   hero, the nav while it sits over the hero) and its subtree gets the
   inverted token set. The site no longer has a global dark/light toggle.
   `color: var(--fg)` is set explicitly so descendants that inherit color
   pick up the locally-scoped --fg instead of the body's root --fg. */
.theme-dark {
  --bg: #080808;
  --bg-soft: #101010;
  --fg: #f5f5f2;
  --fg-dim: rgba(245, 245, 242, 0.62);
  --fg-mute: rgba(245, 245, 242, 0.38);
  --line: rgba(245, 245, 242, 0.13);
  --line-soft: rgba(245, 245, 242, 0.06);
  --card-dark: #161616;
  --card-light: #242422;
  color: var(--fg);
}