/* ─────────────────────────────────────────────────────────────
   SLATE — Colors & Type
   AI Video Production Studio · powered by GEAP
   ───────────────────────────────────────────────────────────── */

/* Fonts loaded from Google Fonts CDN.
   FLAGGED SUBSTITUTIONS — no font files exist in the source repo;
   these are first-pass picks. Confirm or swap with the team:
     · Display    → Instrument Serif (editorial, italic-friendly)
     · UI/Body    → Geist (clean grotesk, Vercel)
     · Monospace  → Geist Mono (timecodes, agent IDs, code) */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ── COLOR · CORE NEUTRALS ─────────────────────────────────
     "Slate" is the dark stage. Cream is the film-leader paper. */
  --slate-ink:   #0B0B0D;   /* deepest — page bg in dark mode */
  --slate-1000:  #101013;
  --slate-900:   #16161A;   /* card / panel bg dark */
  --slate-800:   #1E1E23;   /* raised surface */
  --slate-700:   #2A2A30;   /* borders on dark */
  --slate-600:   #3A3A42;
  --slate-500:   #5B5B65;   /* muted text on dark */
  --slate-400:   #8A8A94;
  --slate-300:   #B5B4BC;
  --slate-200:   #D6D4CE;
  --slate-100:   #E8E5DE;   /* paper edge */
  --cream:       #EFECE4;   /* film-leader cream — the "paper" */
  --cream-warm:  #F5F1E8;   /* slightly warmer paper */
  --paper-white: #FAF8F3;

  /* ── COLOR · SIGNAL (the one accent) ───────────────────────
     Amber from the clapperboard insert / production warning lamp.
     Use SPARINGLY — single accent on critical actions, REC, marks. */
  --signal-amber:   #F5B544;
  --signal-amber-hi:#FFC766;
  --signal-amber-lo:#C68D2A;
  --signal-amber-ink:#3A2A0B;  /* foreground on amber */

  /* ── COLOR · STATUS ────────────────────────────────────────
     Production-floor coding: REC, SYNC, CUT */
  --rec-red:    #E0464A;   /* REC / error / cut */
  --rec-red-hi: #FF6469;
  --rec-red-lo: #8A2226;
  --sync-green: #6FB57D;   /* OK / sync / pass */
  --sync-green-hi:#8FD89E;
  --sync-green-lo:#3A6E47;
  --cue-blue:   #6A8FC4;   /* info / queued */
  --cue-blue-lo:#3A5A8F;

  /* ── SEMANTIC · DARK SURFACE (default) ─────────────────────
     What components reach for. Don't reference raw scale tokens
     in component CSS — use these. */
  --bg:         var(--slate-ink);
  --bg-raised: var(--slate-900);
  --bg-sunken: #0E0E12;
  --surface:    var(--slate-900);
  --surface-2:  var(--slate-800);
  --surface-3:  var(--slate-700);

  --fg:         var(--cream);           /* primary text */
  --fg-muted:   var(--slate-300);       /* secondary */
  --fg-dim:     #7A7A84;                /* tertiary, labels — lifted for contrast */
  --fg-faint:   #5A5A68;               /* placeholder, disabled — lifted for contrast */
  --fg-on-accent: var(--signal-amber-ink);

  --border:        var(--slate-700);
  --border-strong: var(--slate-600);
  --border-faint:  var(--slate-800);

  --accent:        var(--signal-amber);
  --accent-fg:     var(--signal-amber-ink);
  --accent-hover:  var(--signal-amber-hi);

  --danger:  var(--rec-red);
  --success: var(--sync-green);
  --info:    var(--cue-blue);

  /* ── TYPE · FAMILIES ───────────────────────────────────────  */
  --font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-sans:    'Geist', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── TYPE · SIZE SCALE (px) ─────────────────────────────────
     Modular-ish 1.25 with overrides. Use semantic vars below in
     production — these are the underlying scale tokens. */
  --t-2xs: 10px;   /* mono caps, registration marks */
  --t-xs:  11px;   /* labels, brackets */
  --t-sm:  13px;   /* metadata, captions */
  --t-base:15px;   /* body */
  --t-md:  17px;   /* body emphasis */
  --t-lg:  20px;
  --t-xl:  24px;
  --t-2xl: 32px;
  --t-3xl: 44px;
  --t-4xl: 64px;
  --t-5xl: 88px;
  --t-6xl: 120px;

  /* ── TYPE · LINE HEIGHT ────────────────────────────────────  */
  --lh-tight:  1.04;   /* display */
  --lh-snug:   1.18;   /* headings */
  --lh-normal: 1.45;   /* UI */
  --lh-prose:  1.6;    /* body copy */
  --lh-mono:   1.5;

  /* ── TYPE · WEIGHTS ────────────────────────────────────────  */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ── TYPE · TRACKING (letter-spacing) ──────────────────────  */
  --track-tight:  -0.02em;   /* display */
  --track-snug:   -0.01em;   /* headings */
  --track-normal: 0;
  --track-wide:    0.04em;
  --track-caps:    0.14em;   /* small caps labels */
  --track-slate:   0.22em;   /* the SLATE brand spacing */

  /* ── SPACING (4px base) ────────────────────────────────────  */
  --s-0:  0;
  --s-1:  2px;
  --s-2:  4px;
  --s-3:  8px;
  --s-4:  12px;
  --s-5:  16px;
  --s-6:  20px;
  --s-7:  24px;
  --s-8:  32px;
  --s-9:  40px;
  --s-10: 48px;
  --s-11: 64px;
  --s-12: 80px;
  --s-13: 120px;

  /* ── RADIUS — tight, mechanical ────────────────────────────
     SLATE is precision-feeling. Nothing is more rounded than 6px
     except pills. Most surfaces sit at 2–4px. */
  --r-0:    0;
  --r-xs:   2px;
  --r-sm:   3px;
  --r-md:   4px;
  --r-lg:   6px;
  --r-xl:   10px;     /* reserved for big modal containers */
  --r-pill: 999px;

  /* ── BORDERS ───────────────────────────────────────────────  */
  --bw-hair: 0.5px;
  --bw-1:    1px;
  --bw-2:    2px;

  /* ── ELEVATION — quiet, paper-like, no soft bloom ──────────
     We avoid the glowy "SaaS" shadow. Shadows are crisp, near-black,
     short. On the cream theme they go warm. */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 rgba(0,0,0,.45), 0 1px 2px -1px rgba(0,0,0,.5);
  --shadow-2: 0 1px 0 0 rgba(0,0,0,.4), 0 3px 8px -3px rgba(0,0,0,.55), 0 1px 1px rgba(0,0,0,.3);
  --shadow-3: 0 1px 0 0 rgba(0,0,0,.4), 0 12px 28px -10px rgba(0,0,0,.62), 0 2px 6px -2px rgba(0,0,0,.4);
  --shadow-4: 0 2px 0 0 rgba(0,0,0,.5), 0 28px 56px -18px rgba(0,0,0,.78), 0 4px 12px -4px rgba(0,0,0,.5);
  /* Hairline top highlight — the catch-light on a raised surface. Pairs with shadows. */
  --shadow-inset: inset 0 1px 0 0 rgba(255,255,255,.045), inset 0 0 0 1px rgba(255,255,255,.018);
  --edge-hi: inset 0 1px 0 0 rgba(255,255,255,.06);

  /* Amber "lamp glow" — used ONLY on the REC indicator etc. */
  --glow-amber: 0 0 0 1px rgba(245,181,68,.4), 0 0 16px -2px rgba(245,181,68,.35);
  --glow-red:   0 0 0 1px rgba(224,70,74,.45), 0 0 14px -2px rgba(224,70,74,.5);

  /* ── MOTION ────────────────────────────────────────────────  */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.6, 0, 0.7, 0.2);
  --ease-std:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snap:  cubic-bezier(0.5, 0, 0.05, 1.05);    /* small overshoot — production "punch" */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
  --dur-slower: 600ms;

  /* ── Z ─────────────────────────────────────────────────────  */
  --z-base: 1;
  --z-raised: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-toast: 1500;
}

/* ─────────────────────────────────────────────────────────────
   LIGHT THEME — "Paper". Reverses the slate.
   ───────────────────────────────────────────────────────────── */
[data-theme="paper"] {
  --bg:         var(--cream);
  --bg-raised:  var(--paper-white);
  --bg-sunken:  var(--cream-warm);
  --surface:    var(--paper-white);
  --surface-2:  var(--cream);
  --surface-3:  var(--slate-100);

  --fg:         var(--slate-ink);
  --fg-muted:   var(--slate-700);
  --fg-dim:     var(--slate-500);
  --fg-faint:   var(--slate-400);

  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --border-faint:  var(--slate-100);

  --shadow-1: 0 1px 0 0 rgba(20,15,5,.06), 0 1px 2px -1px rgba(20,15,5,.1);
  --shadow-2: 0 1px 0 0 rgba(20,15,5,.05), 0 4px 12px -4px rgba(20,15,5,.12), 0 1px 1px rgba(20,15,5,.06);
  --shadow-3: 0 1px 0 0 rgba(20,15,5,.05), 0 16px 28px -12px rgba(20,15,5,.2), 0 2px 6px -2px rgba(20,15,5,.1);
  --shadow-4: 0 2px 0 0 rgba(20,15,5,.06), 0 28px 48px -20px rgba(20,15,5,.28), 0 4px 12px -4px rgba(20,15,5,.14);
  --shadow-inset: inset 0 1px 0 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(20,15,5,.025);
  --edge-hi: inset 0 1px 0 0 rgba(255,255,255,.6);
}

/* ─────────────────────────────────────────────────────────────
   SEMANTIC TEXT STYLES — apply directly with class names.
   ───────────────────────────────────────────────────────────── */

/* Display — editorial serif, the SLATE voice */
.t-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--t-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg);
}
.t-display-xl { font-family: var(--font-display); font-weight:var(--w-regular); font-size:var(--t-6xl); line-height:var(--lh-tight); letter-spacing:var(--track-tight); }
.t-display-md { font-family: var(--font-display); font-weight:var(--w-regular); font-size:var(--t-4xl); line-height:var(--lh-tight); letter-spacing:var(--track-tight); }
.t-display-sm { font-family: var(--font-display); font-weight:var(--w-regular); font-size:var(--t-3xl); line-height:var(--lh-snug); letter-spacing:var(--track-snug); }
.t-display-italic { font-style: italic; }

/* H1–H4 — sans, tight */
.t-h1, h1 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--t-2xl); line-height: var(--lh-snug); letter-spacing: var(--track-snug); color: var(--fg); }
.t-h2, h2 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--t-xl); line-height: var(--lh-snug); letter-spacing: var(--track-snug); color: var(--fg); }
.t-h3, h3 { font-family: var(--font-sans); font-weight: var(--w-medium);   font-size: var(--t-lg); line-height: var(--lh-snug); color: var(--fg); }
.t-h4, h4 { font-family: var(--font-sans); font-weight: var(--w-medium);   font-size: var(--t-md); line-height: var(--lh-normal); color: var(--fg); }

/* Body */
.t-body, p { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--t-base); line-height: var(--lh-prose); color: var(--fg); }
.t-body-sm { font-family: var(--font-sans); font-size: var(--t-sm); line-height: var(--lh-prose); color: var(--fg-muted); }
.t-lead    { font-family: var(--font-sans); font-size: var(--t-md); line-height: var(--lh-prose); color: var(--fg-muted); font-weight: var(--w-regular); }

/* Mono — labels, timecodes, agent IDs, code */
.t-mono     { font-family: var(--font-mono); font-size: var(--t-sm); line-height: var(--lh-mono); }
.t-mono-sm  { font-family: var(--font-mono); font-size: var(--t-xs); line-height: var(--lh-mono); }
.t-code     { font-family: var(--font-mono); font-size: var(--t-sm); background: var(--surface-2); padding: 1px 6px; border-radius: var(--r-xs); border: 1px solid var(--border-faint); }

/* Caps labels — the "production slate" stamp */
.t-label {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--fg-dim);
}
.t-label-strong { color: var(--fg-muted); }

/* SLATE wordmark spacing — used on logo + section breaks */
.t-slate-mark {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-slate);
  text-transform: uppercase;
}

/* Timecode — HH:MM:SS:FF with tabular nums */
.t-timecode {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: 0.02em;
}

/* Quote — pulled from the production journal */
.t-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

/* Utility */
.fg        { color: var(--fg); }
.fg-muted  { color: var(--fg-muted); }
.fg-dim    { color: var(--fg-dim); }
.fg-faint  { color: var(--fg-faint); }
.fg-accent { color: var(--accent); }
.fg-rec    { color: var(--rec-red); }
.fg-sync   { color: var(--sync-green); }