/* IntroGen design tokens — the dashboard + all UI MUST use these.
   The DESIGN LANGUAGE ("Premium motion-graphics editing suite"):
   deep charcoal → near-black layered panels with TACTILE, felt floating depth
   (soft refined drop shadow + a lit top-edge bezel), a CYAN/teal HERO accent
   (the live/active/playhead/now signal — it LEADS), VIOLET as the secondary
   interaction accent, generous soft-rounded radii, sans-first type on a modular
   scale, a strict 4/8 spacing grid, one easing personality, and the cyan
   PLAYHEAD as the recurring signature motif. Every consumer reads a var — no
   literal palette/size/spacing value belongs outside this file + the panel
   :root alias. */
:root {
  --ig-bg: #0b0d12;
  --ig-bg-elev: #12151d;
  --ig-bg-card: #161a24;
  --ig-border: #262b38;
  --ig-border-strong: #343b4d;
  --ig-fg: #f4f5f8;
  --ig-fg-muted: #9aa1b2;
  /* subtle text (labels, hints, meta). Lightened from #6a7183 → #7d8496 so it
     clears WCAG AA 4.5:1 on every dark surface (bg/elev/card), not just ~4:1.
     Do NOT darken below #7d8496 — the AA rationale is load-bearing. */
  --ig-fg-subtle: #7d8496;
  --ig-violet: #7c5cff;
  --ig-cyan: #22d3ee;
  --ig-gradient: linear-gradient(135deg, #7c5cff 0%, #22d3ee 100%);
  --ig-success: #34d399;
  --ig-warning: #fbbf24;
  --ig-danger: #f87171;
  --ig-radius: 14px;
  --ig-radius-lg: 22px;
  /* PANEL UI typeface = Inter (self-hosted OFL). Geist kept as a fallback before
     the system stack. The mono/data voice stays Geist Mono (audit: mono = data only). */
  --ig-font: 'Inter', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --ig-mono: 'Geist Mono', ui-monospace, monospace;
  --ig-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  --ig-glow: 0 0 40px -8px rgba(124, 92, 255, 0.45);

  /* ===== DESIGN-LANGUAGE PRIMITIVES (the single canonical source) ===== */

  /* ---- surfaces: deep charcoal → near-black, warm-neutral steps (richer/darker
     than flat grey — the motion-suite look). Depth comes from BOTH the lightness
     step AND a felt floating shadow (see elevation). ---- */
  --surface-well: #06070b; /* deepest well — input/console/video bg (near-black) */
  --surface-raise: #1c2130; /* hover lift — a clear, warm-neutral step up */

  /* ---- borders + the lit bezel: hairlines carry structure, the top-edge gloss
     gives panels a tactile "lit bezel" highlight (the reference's crafted depth) ---- */
  --border-glass: rgba(255, 255, 255, 0.08); /* glass top-edge highlight (lit bezel) */
  --bezel-top: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* the 1px lit top edge on a panel */

  /* ---- THE HERO ACCENT (cyan/teal) — the live/active/playhead/now signal; it LEADS.
     GUARDRAIL: cyan is only ever text/line/dot/tint — NEVER a solid fill with light
     text (white-on-cyan ≈ 1.68:1, fails AA). If a future wave uses cyan as a button/
     pill background, the label MUST be dark (#06070b on cyan ≈ 12:1). ---- */
  --accent: #22e0c2; /* hero: playhead, active, live, now — bright teal-cyan */
  --accent-hover: #46ecd2; /* +lightness for hover */
  --accent-soft: rgba(34, 224, 194, 0.14); /* tint fill (active tab/row/chip) */
  --accent-ring: rgba(34, 224, 194, 0.55); /* soft focus halo (≥3:1 self-contrast on dark) */

  /* ---- THE SECONDARY ACCENT (violet) — secondary interaction / primary buttons ---- */
  --accent-2: #7c5cff; /* secondary interaction, primary CTA base */
  --accent-2-hover: #8f74ff;
  --accent-2-soft: rgba(124, 92, 255, 0.14);
  /* focus-ring alpha 0.6 (not 0.38): a soft halo that still clears the WCAG 2.4.11/
     1.4.11 3:1 focus-indicator self-contrast on the near-black surfaces — the audit
     flagged 0.38 as dimmer than the hard outline it replaced. */
  --accent-2-ring: rgba(124, 92, 255, 0.6);

  /* ---- SIGNAL colours — status ONLY, never decoration ---- */
  --signal-live: #22e0c2; /* cyan hero = running/live/now (same as --accent) */
  --signal-ok: #34d399; /* success */
  --signal-warn: #fbbf24; /* needs-input / keyframe-marker micro-accent */
  --signal-danger: #f87171; /* error/destructive */

  /* ---- SMALL-TEXT contrast variants (WCAG AA 4.5:1). The vivid accent/signal
     bases above are TUNED for non-text graphics (borders/dots/tint-fills/edges/
     rings ≥3:1). As SMALL TEXT the violet base clears only ~4.0–4.5:1, so text
     sites read the lighter --accent-2-text (≥5.56:1 on the worst dark surface).
     The others already clear AA as dark-theme text; light mode (below) darkens
     ALL of them since the vivid signals collapse to 1.3–2.2:1 on light. Repoint
     ONLY small-text color: sites at these — never a border/dot/fill. */
  --accent-2-text: #9d86ff; /* violet as small text: ≥5.56:1 on dark (base ~4.0–4.5 fails AA) */
  --warn-text: #fbbf24; /* amber text ≥9.6:1 on dark; light darkens it */
  --ok-text: #34d399; /* success text ≥8:1 on dark */
  --danger-text: #f87171; /* danger text ≥5.8:1 on dark */
  --accent-text: #22e0c2; /* cyan text ≥9.5:1 on dark */

  /* ---- the gradient: RATIONED to the signature + primary CTA ONLY — violet→cyan,
     the two accents meeting (secondary → hero) ---- */
  --grad-signature: linear-gradient(120deg, #7c5cff 0%, #22e0c2 100%);

  /* ---- the PLAYHEAD signature — a recurring 2px cyan now-line (timeline scrub,
     active-tab underline, section now-marker). The motion-graphics-native motif. ---- */
  --playhead: #22e0c2;
  --playhead-w: 2px;

  /* ---- type scale — a tight ~1.16–1.2 modular ladder (replaces ~19 ad-hoc sizes) ---- */
  --fs-caption: 11px; /* meta, chip, timestamp, tiny label */
  --fs-label: 12px; /* field labels, tab labels, eyebrows */
  --fs-body-sm: 13px; /* dense body, list rows, card sub */
  --fs-body: 14px; /* default body, inputs, buttons */
  --fs-lead: 16px; /* section intros, card titles */
  --fs-h3: 19px; /* stage title, panel h2 */
  --fs-h2: 24px; /* stat value, page title */
  --fs-h1: 30px; /* the one hero */

  /* weights */
  --fw-regular: 400;
  --fw-medium: 500; /* default for labels + buttons */
  --fw-semibold: 600; /* titles, emphasis, hero */

  /* tracking — TIGHT on display, NORMAL on body, WIDE only on small labels */
  --tr-tight: -0.02em; /* h1/h2/h3 display */
  --tr-snug: -0.01em; /* lead / large body */
  --tr-normal: 0; /* body */
  --tr-label: 0.06em; /* uppercase sans labels (dialed DOWN from .14–.22em) */
  --tr-mono: 0.02em; /* mono data */

  /* ---- spacing — strict 4px base, 8px rhythm ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- radius ladder — generous, soft, tactile (the reference is very rounded) ---- */
  --r-sm: 10px; /* menu items, tiny thumbs, close buttons, kbd */
  --r-chip: 8px; /* chips, status pills */
  --r-ctrl: 12px; /* inputs, selects, buttons */
  --r-card: 18px; /* cards, tiles, wells */
  --r-panel: 24px; /* the big panels: rail/stage/inspector/modal */

  /* ---- ELEVATION — TACTILE floating depth (the motion-suite signature). Every
     tier is FELT: a soft, refined drop shadow PLUS a lit top-edge bezel so panels
     read as crafted, floating layers — not flat. Depth is a feature here. The
     static desk panels sit at --elev-1 (gently floating), overlays climb to
     --elev-3/4. Pair a panel's box-shadow with --bezel-top for the lit edge. ---- */
  --elev-0: none; /* only truly inline / flush elements */
  --elev-1:
    0 2px 8px -2px rgba(0, 0, 0, 0.4), 0 6px 20px -8px rgba(0, 0, 0, 0.45); /* static panels/cards — gently floating */
  --elev-2:
    0 6px 16px -6px rgba(0, 0, 0, 0.5), 0 14px 34px -12px rgba(0, 0, 0, 0.55); /* dropdown / menu / toast */
  --elev-3:
    0 12px 28px -10px rgba(0, 0, 0, 0.55), 0 28px 60px -20px rgba(0, 0, 0, 0.7); /* palette / modal / drawer (float) */

  /* ---- motion — one easing personality ---- */
  --dur-fast: 120ms; /* hover / press / colour state */
  --dur-base: 180ms; /* toggles, tab switch, reveal */
  --dur-slow: 240ms; /* overlay entrance */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* the default — crisp, confident settle */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* symmetric moves */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* entrances */
}

.ig-light {
  --ig-bg: #f2f3f8;
  --ig-bg-elev: #ffffff;
  --ig-bg-card: #e9ebf3;
  --ig-border: #dcdfe9;
  --ig-border-strong: #c4c9d8;
  --ig-fg: #14161d;
  --ig-fg-muted: #4d5464;
  /* subtle text darkened from #878da0 → #626977 so it clears WCAG AA 4.5:1 on
     every light surface (base/card/elev), not just ~2.9:1. */
  --ig-fg-subtle: #626977;
  --ig-shadow: 0 20px 50px -20px rgba(20, 22, 29, 0.18);
  --ig-glow: 0 0 40px -8px rgba(124, 92, 255, 0.25);

  /* light-mode overrides of the re-tuned primitives (accent/signal/type/spacing/
     radius/motion are theme-invariant — only surfaces, glass edge + elevation ink flip;
     elevation stays FELT in light too, just with lighter ink) */
  --surface-well: #fdfdff; /* light well — input/console bg */
  --surface-raise: #e2e6f0; /* light hover lift */
  --border-glass: rgba(255, 255, 255, 0.9); /* light glass top-edge highlight */
  --bezel-top: inset 0 1px 0 rgba(255, 255, 255, 0.8); /* lit top edge on a light panel */
  --elev-1: 0 2px 8px -2px rgba(20, 22, 29, 0.08), 0 6px 20px -8px rgba(20, 22, 29, 0.1);
  --elev-2: 0 6px 16px -6px rgba(20, 22, 29, 0.12), 0 14px 34px -12px rgba(20, 22, 29, 0.16);
  --elev-3: 0 12px 28px -10px rgba(20, 22, 29, 0.16), 0 28px 60px -20px rgba(20, 22, 29, 0.22);

  /* the PLAYHEAD is a 2px non-text INDICATOR (active-tab underline/edge). The bright
     dark-theme teal #22e0c2 is nearly invisible on light surfaces (~1.4:1, fails WCAG
     1.4.11's 3:1 for a graphical state cue), so light mode darkens it to a teal that
     clears ≥3:1 on every light surface (well/card/raise/base) while still reading as
     the same cyan/teal hero. Dark mode keeps the bright #22e0c2 (10–12:1 there). */
  --playhead: #0a8f7a;

  /* small-text contrast variants, LIGHT theme: the vivid dark-theme accent/signal
     colours collapse to 1.3–2.2:1 as text on light surfaces, so every text variant
     darkens to clear AA 4.5:1 on the worst light surface (bg/card/elev/raise/well)
     AND on its own tint-fill composite. Non-text graphics keep the vivid base. */
  --accent-2-text: #5b3fd6; /* violet text ≥5.38:1 on light */
  --warn-text: #8a5600; /* amber text 4.93:1 (base ~1.4–1.7:1 fails hard) */
  --ok-text: #0e6f46; /* success text 4.97:1 */
  --danger-text: #b82626; /* danger text 5.03:1 */
  /* darker than a first-pass #097466: that cleared 4.5:1 on FLAT light surfaces but
     dipped to ~4.28:1 as cyan text ON its own cyan tint-fill (--accent-soft 0.14 over
     the grey --surface-raise), the worst real combo (fetched-badge / running-step).
     #0a6b5e clears ≥4.83:1 on that composite + ≥5.1:1 flat. */
  --accent-text: #0a6b5e; /* cyan text ≥4.83:1 incl. on the accent tint-fill (base ~1.3:1) */
}