/* ============================================================
   transmissions — design tokens
   The single source for palette, type, radii, spacing, easing,
   glass recipes, z-layers, and safe areas.
   Parent law: BRAND-LOCK.md §2-3, _brand/site/typography.md.
   ============================================================ */

/* ---- Space Grotesk, self-hosted variable woff2 (300-700) ---- */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* ---- palette: dead air, glass, one accent ---- */
  --world: #000000;
  --pane: rgba(14, 14, 18, 0.92);
  --pane-soft: rgba(20, 20, 27, 0.68);
  --pane-hard: rgba(10, 10, 14, 0.97);

  --fg: #f5f5f7;
  --fg-muted: rgba(245, 245, 247, 0.74);
  --fg-dim: rgba(245, 245, 247, 0.52);
  --fg-faint: rgba(245, 245, 247, 0.34);
  --fg-ghost: rgba(245, 245, 247, 0.16);

  --hairline: rgba(245, 245, 247, 0.09);
  --hairline-strong: rgba(245, 245, 247, 0.17);

  --accent: #c4b5fd;
  --accent-strong: #d8cdfe;
  --accent-ink: #0b0a12; /* text set on solid accent */
  --accent-70: rgba(196, 181, 253, 0.7);
  --accent-45: rgba(196, 181, 253, 0.45);
  --accent-28: rgba(196, 181, 253, 0.28);
  --accent-16: rgba(196, 181, 253, 0.16);
  --accent-10: rgba(196, 181, 253, 0.1);
  --accent-06: rgba(196, 181, 253, 0.06);

  /* ON AIR red. Casting call live + live events ONLY. Never decoration. */
  --live: rgba(240, 80, 80, 1);
  --live-45: rgba(240, 80, 80, 0.45);
  --live-14: rgba(240, 80, 80, 0.14);

  /* holo foil spectrum: axis card foil + prop shimmer finishes ONLY.
     UI chrome never borrows these. */
  --holo-a: rgba(167, 139, 250, 0.5);
  --holo-b: rgba(103, 232, 249, 0.42);
  --holo-c: rgba(240, 171, 252, 0.46);

  /* ---- faces ---- */
  --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui,
    sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ---- type scale (typography.md §4) ---- */
  --fs-display-xl: clamp(52px, 11vw, 132px);
  --fs-display: clamp(2.75rem, 5vw, 4.75rem);
  --fs-headline: clamp(2.25rem, 4.6vw, 4rem);
  --fs-subhead: clamp(1.85rem, 3.4vw, 2.85rem);
  --fs-title: clamp(1.25rem, 2.2vw, 2.25rem);
  --fs-lede: clamp(16px, 1.6vw, 19px);
  --fs-body: 15px;
  --fs-small: 12.5px;
  --fs-eyebrow: 10.5px;
  --fs-micro: 9px;

  /* ---- tracking ---- */
  --tracking-display: -0.04em;
  --tracking-head: -0.025em;
  --tracking-title: -0.02em;
  --tracking-body: 0.005em;
  --tracking-label: 0.26em;
  --tracking-label-wide: 0.32em;

  /* ---- radii: rounded geometry, nothing sharp ---- */
  --r-xl: 28px;
  --r-l: 18px;
  --r-m: 14px;
  --r-pill: 999px;

  /* ---- spacing scale ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-glide: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 140ms;
  --t-med: 280ms;
  --t-slow: 550ms;

  /* ---- glass recipes ---- */
  --glass-blur: 32px;
  --glass-blur-soft: 18px;
  --glass-border: 1px solid var(--hairline);
  --glass-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --glass-shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.45);
  --glow-accent: 0 0 24px rgba(196, 181, 253, 0.35);
  --glow-accent-strong: 0 0 18px rgba(196, 181, 253, 0.55),
    0 0 48px rgba(196, 181, 253, 0.25);

  /* ---- z-layers ---- */
  --z-world: 0;
  --z-stage: 10;
  --z-chrome: 40; /* top bar */
  --z-dock: 50;
  --z-sheet: 60;
  --z-toast: 70;
  --z-fx: 80; /* screen-space particle bursts */

  /* ---- safe areas ---- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ---- shell metrics ---- */
  --topbar-h: 56px;
  --dock-h: 66px;
  --dock-gap: 14px; /* dock float distance from the bottom edge */
  --stage-pad-x: 16px;
  --stage-max: 1120px; /* views that want a column constrain to this */
  --tap-min: 44px;
}