/* ============================================================
   StageQueue — "Marquee" design tokens
   Source of truth for this repo. Generated once (2026-06-29) from
   the stagequeue-design Claude Design skill's tokens/*.css.
   Going forward: edit tokens HERE, then regenerate the skill from
   this file (per SETUP.md B5) — not the other way round.
   ============================================================ */

/* ---- Fonts ----
   Currently served from Google Fonts. To self-host later, replace
   this @import with local @font-face rules + woff2 binaries. */
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

/* ============================================================
   COLORS — warm, theatre-booth palette. Dark-first (backstage +
   audience live mode); .theme-light drives the marketing site.
   ============================================================ */
:root {
  /* ---- Brand: the lights ---- */
  --amber-bright:  #FFC766;  /* glow / hover top */
  --amber:         #FFB23E;  /* PRIMARY accent — the bulb */
  --amber-deep:    #E8961F;  /* pressed amber */
  --gold:          #F5C451;  /* secondary warm highlight */

  /* ---- Brand: the room ---- */
  --oxblood:       #6E1F1A;  /* deep curtain red */
  --curtain:       #4A1614;  /* darkest red */
  --signal:        #D6452C;  /* live / record / hot action */
  --signal-bright: #FF5A3F;  /* live pulse peak */
  --signal-deep:   #B33420;  /* pressed signal */

  /* ---- Warm neutral ramp (dark → light) ---- */
  --ink-900: #0F0708;  /* deepest void — audience bg */
  --ink-850: #160A0B;  /* base backstage canvas */
  --ink-800: #1C0F10;  /* raised panel */
  --ink-700: #251416;  /* card surface */
  --ink-600: #321B1D;  /* elevated card / input */
  --ink-500: #45282A;  /* hairline / border on dark */
  --ink-400: #5E3B3A;  /* strong border */
  --ink-300: #8A6A66;  /* muted text on dark */
  --ink-200: #B6A097;  /* secondary text on dark */
  --cream-100: #F4E9D8; /* primary text on dark / brand cream */
  --cream-50:  #FBF6EC; /* paper — marketing light bg */
  --white:     #FFFFFF;

  /* ---- Status (kept warm + minimal) ---- */
  --live:     #FF4A3D;  /* "on stage now" */
  --ok:       #7FB97A;  /* checked-in / ready */
  --wait:     #FFB23E;  /* on deck / pending */
  --danger:   #D6452C;

  /* ---- Logo-mark-only (bespoke gradient stops, not part of the shared
     palette above — kept as named tokens rather than inline hex so the
     mark stays the only place these values are defined) ---- */
  --logo-curtain:   #4A181A;
  --logo-highlight: #FFD37A;
  --bg-vignette:    #3A1313; /* marketing page hero background, bespoke */

  /* ============ SEMANTIC ALIASES — dark (default) ============ */
  --bg-base:      var(--ink-850);
  --bg-sunken:    var(--ink-900);
  --bg-panel:     var(--ink-800);
  --surface:      var(--ink-700);
  --surface-2:    var(--ink-600);
  --border:       var(--ink-500);
  --border-strong:var(--ink-400);

  --text:         var(--cream-100);
  --text-muted:   var(--ink-200);
  --text-faint:   var(--ink-300);
  --text-on-amber:#160A0B;

  --accent:       var(--amber);
  --accent-hover: var(--amber-bright);
  --accent-press: var(--amber-deep);
  --accent-quiet: rgba(255, 178, 62, 0.14); /* amber wash */

  --focus-ring:   var(--amber);
}

/* ============ SEMANTIC ALIASES — light (marketing) ============ */
.theme-light {
  --bg-base:      var(--cream-50);
  --bg-sunken:    #F1E7D6;
  --bg-panel:     #FFFFFF;
  --surface:      #FFFFFF;
  --surface-2:    #FBF6EC;
  --border:       #E4D7C2;
  --border-strong:#CDBBA0;

  --text:         var(--ink-850);
  --text-muted:   #6A4E45;
  --text-faint:   #9C8478;
  --text-on-amber:#160A0B;

  --accent:       var(--signal);      /* on paper the red leads */
  --accent-hover: var(--signal-bright);
  --accent-press: var(--signal-deep);
  --accent-quiet: rgba(214, 69, 44, 0.10);

  --focus-ring:   var(--signal);
}

/* ============================================================
   TYPOGRAPHY
   Display: Big Shoulders Display (tall, marquee-signage energy)
   Body/UI: Hanken Grotesk (warm humanist grotesque)
   Mono:    JetBrains Mono (cue numbers, timecodes, status)
   ============================================================ */
:root {
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-extra:   800;
  --w-black:   900;

  /* Type scale (px) — fluid-friendly steps */
  --t-mono-xs:   11px;  /* cue labels, eyebrows */
  --t-mono-sm:   13px;
  --t-body-xs:   12px;
  --t-body-sm:   13.5px;
  --t-body-md:   15px;  /* default UI / paragraph */
  --t-body-lg:   18px;
  --t-display-sm: 28px;
  --t-display-md: 40px;
  --t-display-lg: 64px;
  --t-display-xl: 104px; /* audience "Now Playing" name */
  --t-display-2xl: 160px;/* big-screen broadcast */

  /* Line heights */
  --lh-tight:  0.94;
  --lh-snug:   1.12;
  --lh-normal: 1.5;

  /* Tracking */
  --track-display: -0.01em;
  --track-body:    0;
  --track-label:   0.16em;  /* mono eyebrows / cue labels */
  --track-wide:    0.22em;
}

/* ============================================================
   SPACING, RADII, LAYOUT
   4px base grid. Touch targets sized for one-handed live use.
   ============================================================ */
:root {
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Radii — soft, app-icon family. Squircle-ish at large sizes. */
  --r-xs:  6px;
  --r-sm:  9px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-2xl: 28px;   /* app-icon corner */
  --r-pill: 999px;

  /* Touch — backstage is used one-handed, in the dark */
  --touch-min:  44px;   /* never smaller */
  --touch-comfy:56px;   /* primary live actions */
  --touch-big:  72px;   /* the GO / advance control */

  /* Content widths */
  --content-w: 1100px;
  --prose-w:   62ch;
}

/* ============================================================
   EFFECTS — shadows, bulb glows, transitions
   The "lights" are a core motif: amber glows, marquee bulbs.
   ============================================================ */
:root {
  /* Elevation (warm-tinted shadows on dark) */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --shadow-md:  0 6px 18px rgba(0,0,0,.40);
  --shadow-lg:  0 14px 40px rgba(0,0,0,.50);
  --shadow-pop: 0 24px 70px rgba(0,0,0,.55);

  /* The lights — amber glows */
  --glow-amber:  0 0 20px rgba(255,178,62,.55);
  --glow-amber-soft: 0 0 14px rgba(255,178,62,.35);
  --glow-live:   0 0 16px rgba(255,74,61,.65);
  --glow-bulb:   0 0 7px rgba(255,178,62,.9);

  /* Hairline insets used on cards/inputs in the dark */
  --ring-amber:  inset 0 0 0 1px rgba(255,178,62,.22);
  --ring-soft:   inset 0 0 0 1px rgba(255,255,255,.06);

  /* Motion — quick, confident, no bounce-slop */
  --ease-out:   cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.5,0,.2,1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   340ms;

  /* Marquee bulb gradient (reuse on dots) */
  --bulb: radial-gradient(circle at 40% 35%, #fff, var(--amber) 70%);
}

/* The signature "live" pulse — used on NOW PLAYING dots */
@keyframes sq-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(255,74,61,.55); }
  50%      { opacity: .75; box-shadow: 0 0 0 7px rgba(255,74,61,0); }
}
/* Marquee chase for bulb rows (optional accent) */
@keyframes sq-chase {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}