/* ============================================================
   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=DM+Mono:wght@400;500&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 */
  --ok-bright:#9BCB96;  /* GO / Start show button gradient top */
  --ok-deep:  #5E9E5A;  /* GO / Start show button gradient bottom */
  --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);

  /* Same token as .theme-light/.theme-ops define below — here it's
     just an alias for --accent since amber already leads on this dark
     canvas. */
  --button-primary:    var(--accent);
  --button-primary-fg: var(--text-on-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);

  /* Primary-button background/text, deliberately separate from --accent
     above (Simon, session 16 round 8 — he wants --accent/links/tab-
     underline/focus-ring staying the red signal lead, but every primary
     button amber+dark-text like the dashboard's own "Open Backstage"
     button). Same split exists in the base :root theme and .theme-ops
     below, each set to match what that surface's buttons already look
     like today. */
  --button-primary:    var(--amber);
  --button-primary-fg: var(--text-on-amber);

  /* ---- Tenant Admin console additions (session 15, TA-03) ----
     Everything above this point already matched the Tenant Admin
     mockup's "warm paper" spec exactly (design/superadmin-
     tenantadmin/README.md) — canvas, border, text-muted/faint,
     accent all lined up with .theme-light as it already existed.
     Only these few admin-specific extras were genuinely missing:
     table-header tint, a settings-sub-nav tint, sidebar
     active-item tint, and a status triad distinct from the dark
     Marquee canvas's own --ok/--wait/--danger (those are tuned for
     the dark backstage/audience surfaces; these are the mockup's
     own literal admin-console hexes). */
  --surface-alt:      #F8F2E6; /* table headers */
  --surface-sub:      #FDFAF3; /* settings sub-nav column */
  --nav-active-bg:    #F6EDDF;
  --status-ok:        #3F7A46;
  --status-warn:      #8A4A18;
  --status-warn-tint: #FFF3E0;
  --status-warn-border: #F2E2C4;
}

/* ============ SEMANTIC ALIASES — Super Admin ops console
   (session 15, SA-01) ============
   Cool grey — deliberately distinct from both the dark Marquee
   canvas and Tenant Admin's warm paper (.theme-light above), so a
   screenshot of /superadmin/ is never mistaken for a tenant's own
   /admin/ (design/superadmin-tenantadmin/README.md's own stated
   goal). Values are the mockup's literal hexes, not derived from
   any existing token — this scope has no prior art in this file. */
.theme-ops {
  --bg-base:      #F7F8FA; /* canvas */
  --bg-sunken:    #E9ECEF; /* area around frames */
  --bg-panel:     #FFFFFF;
  --surface:      #FFFFFF;
  --surface-2:    #FBFCFD; /* footers / pending rows */
  --surface-alt:  #F4F6F8; /* table headers */
  --border:       #E3E6EA;
  --border-row:   #EEF1F4;
  --border-strong:#CFD4DA;

  --text:         #14181D;
  --text-muted:   #59636F;
  --text-faint:   #8A929C;
  --text-on-amber:#FFFFFF;

  --accent:       #1D2530; /* primary buttons — this console has no amber/signal brand lead */
  --accent-hover: #2A3441;
  --accent-press: #14181D;
  --accent-quiet: rgba(29, 37, 48, 0.08);

  --focus-ring:   #1D2530;

  /* Same token as the other two themes define — unchanged look here
     (this console's buttons were never amber), just routed through the
     shared button-primary token so button.js has one variable to read
     regardless of theme. */
  --button-primary:    var(--accent);
  --button-primary-fg: var(--text-on-amber);

  --opsbar:       #16181C;
  --opsbar-border:     #333940; /* PRODUCTION badge outline on the dark ops bar */
  --opsbar-text-muted: #9AA3AE; /* muted text on the dark ops bar (badge label, Sign out) */
  --nav-active-bg:#EDF0F3;

  --status-ok:          #17794C;
  --status-ok-tint:     #EAF1EC; /* Pro tier pill background */
  --neutral-tint:       #F1F3F5; /* neutral (non-Pro) tier pill background */
  --status-warn:        #A66300;
  --status-warn-dot:    #C79A00;
  --status-warn-tint:   #FFFCF5;
  --status-warn-border: #F0DFCB;
  --status-danger:        #C0392B;
  --status-danger-tint:   #FCF7F6;
  --status-danger-border: #EBD2CC;
}

/* ============================================================
   TYPOGRAPHY
   Display: Big Shoulders Display (tall, marquee-signage energy)
   Body/UI: Hanken Grotesk (warm humanist grotesque)
   Mono:    DM Mono (cue numbers, timecodes, status) — the brand
            monospace since 2026-10-03. DM Mono only has 400 and
            500, so no mono style asks for more than 500, and
            font-synthesis-weight below stops the browser faking a bold.
   ============================================================ */
:root {
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, 'Courier New', 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;
}

/* Never fake a bold (2026-10-03). DM Mono ships 400/500 only, so any mono
   text that inherits a heavier weight renders at 500 instead of a smeared
   synthetic bold. The display and body faces load every weight we use, so
   this changes nothing for them. */
html {
  font-synthesis-weight: none;
}

/* ============================================================
   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;

  /* Breakpoints — @media rules must use these literal values (token-lint rule 4).
     CSS custom properties can't be used inside @media, so these are constants
     for JavaScript (getComputedStyle + matchMedia) and documentation only.
     Mobile-first: phone < 640 · tablet 640–1023 · desktop >= 1024; write
     (min-width: 640px) / (min-width: 1024px), and (max-width: 639.98px) /
     (max-width: 1023.98px) where a rule must be below a band.
     Component container queries use 480 / 560 / 720 / 900.
     See claude/responsive-layout-spec.md §3. */
  --bp-tablet:  640px;
  --bp-desktop: 1024px;
}

/* ============================================================
   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);
  --glow-ok:     0 0 26px rgba(127,185,122,.45);

  /* 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);
  --ring-ok:     inset 0 0 0 1.5px rgba(127,185,122,.45);

  /* 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; }
}