/* =============================================================================
   DraftCast Marketing Site — Design Tokens
   -----------------------------------------------------------------------------
   A SUBSET copied (not re-picked) from the app's single source of truth:
   app/src/styles/tokens.css, per docs/website-plan.md section 5 ("copy the
   token block; do not re-pick colours"). 70 of the app file's 98 custom
   properties are carried — only the tokens a static marketing site actually
   consumes. Dropped: team-color injection slots, z-index layering for the
   live broadcast stage, and board/overlay-specific values, none applicable
   here; comments are not carried over either. Every value below matches the
   app file for every token name the two files SHARE — not "byte-for-byte"
   as a whole file, since this file is shorter by design — and that value
   equality is CHECKED, not merely claimed: site/tests/validate-slots.mjs
   extracts every --custom-property from both files and fails if a shared
   name's value differs. If the app file changes a brand value, re-copy the
   affected line rather than hand-editing it out of sync — the check will
   catch a missed one.

   Verified against app/src/styles/tokens.css this session (2026-08-01).
   ========================================================================== */

:root {
  /* ---- Core brand palette ------------------------------------------------ */
  --brand-green: #00c26e;
  --brand-green-bright: #15e088;
  --brand-green-dim: #0a8a50;
  --brand-gold: #c9a227;
  --brand-gold-bright: #e6c04a;
  --brand-silver: #bfc5cc;
  --brand-white: #ffffff;

  /* ---- Canvas tones -------------------------------------------------------*/
  --stage-black: #000000;
  --slate-900: #05070a;
  --slate-850: #080b10;
  --slate-800: #0b0e13;
  --slate-700: #11151c;
  --slate-600: #1a212b;
  --slate-500: #28323f;
  --slate-400: #3b4756;

  /* ---- Text --------------------------------------------------------------*/
  --text-primary: #ffffff;
  --text-secondary: #c2cad4;
  --text-muted: #7f8b99;
  --text-on-light: #06090d;

  /* ---- Semantic surfaces (chrome) ----------------------------------------*/
  --surface-app: var(--slate-900);
  --surface-panel: var(--slate-800);
  --surface-raised: var(--slate-700);
  --surface-input: var(--slate-850);
  --border-chrome: rgba(191, 197, 204, 0.14);
  --border-chrome-strong: rgba(191, 197, 204, 0.28);
  --focus-ring: var(--brand-green);

  /* ---- Typography (theme tokens) ------------------------------------------
     Font FILES are self-hosted from site/assets/fonts/ (see fonts.css) — the
     same three families the app self-hosts via @fontsource, subset to the
     weights this site actually uses. No CDN, no Google Fonts network call. */
  --font-headline: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-data: 'Barlow Semi Condensed', 'Helvetica Neue', sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --weight-headline: 800;
  --headline-italic: italic;
  --tracking-headline: -0.01em;
  --tracking-data: 0.01em;
  --tracking-eyebrow: 0.22em;

  /* Fluid type scale (broadcast graphics read at "second-screen" distance) */
  --fs-eyebrow: clamp(0.66rem, 0.9vw, 0.8rem);
  --fs-meta: clamp(0.82rem, 1.1vw, 1rem);
  --fs-body: clamp(0.95rem, 1.3vw, 1.15rem);
  --fs-name: clamp(1.8rem, 4.4vw, 3.6rem);
  --fs-name-lg: clamp(2.6rem, 6.2vw, 5.4rem);
  --fs-jumbo: clamp(4rem, 12vw, 11rem);

  /* ---- Spacing -------------------------------------------------------------*/
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---- Radii ----------------------------------------------------------------*/
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- Elevation --------------------------------------------------------- */
  --shadow-panel: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-overlay: 0 18px 50px rgba(0, 0, 0, 0.6);
  --glow-green: 0 0 0 1px rgba(0, 194, 110, 0.5), 0 0 24px rgba(0, 194, 110, 0.35);
  --overlay-text-halo: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.45);

  /* ---- Broadcast package surfaces (shared graphics language) ------------- */
  --cut: -8deg;
  --keyline: rgba(255, 255, 255, 0.09);
  --keyline-strong: rgba(255, 255, 255, 0.16);
  --keyline-gold: color-mix(in srgb, var(--brand-gold) 52%, transparent);
  --glass-blur: blur(16px) saturate(1.3);
  --panel-grain: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.04) 0 1px,
    transparent 1px 7px
  );
  --scrim-bottom: linear-gradient(
    180deg,
    transparent 55%,
    rgba(0, 0, 0, 0.32) 82%,
    rgba(0, 0, 0, 0.58) 100%
  );

  /* ---- Motion baselines ---------------------------------------------------*/
  --dur-fast: 0.2s;
  --dur-base: 0.35s;
  --dur-slow: 0.6s;
  --ease-broadcast-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-broadcast-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-broadcast-inout: cubic-bezier(0.83, 0, 0.17, 1);

  /* ---- Broadcast safe area (title-safe inset, TV convention) --------------*/
  --safe-inset: 5%;
}