/* ============================================================================
Boardroom Games — "Broadcast" shared design tokens
----------------------------------------------------------------------------
The corporate counterpart to qc-cabaret.css. Where the drag brand is a
cabaret (chunky outlines, hard offset shadows, Chonburi, the pride gradient),
Broadcast is a television quiz studio: elements separate by LIGHT rather than
line, one variable typeface carries register on its width axis, and every
game's core beat — a row turning over — is the shared "slate".
Every token is namespaced --bc-* on purpose, exactly like --qc-*: a surface
opts in by aliasing the short names it already uses to --bc-* values, so
dropping this file into a game can never clobber another system's vars.
Game accent hexes come from theme.css (--brand-*, generated from
brands/corporate.json) — link theme.css BEFORE this file.
Usage:
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Martian+Mono:wght@400;600&display=swap');
:root{
/* ---- the lighting ramp (ground, not a surface palette) -------------- */
--bc-void: #060B14; /* the room */
--bc-pool: #16233A; /* the lit floor the show stands in */
--bc-slate: #1B2B45; /* a panel at rest */
--bc-slate-hi: #24395B; /* the same panel, spotlit */
/* ---- signal & spotlight -------------------------------------------- */
--bc-signal: #F59E0B; /* live / on-air / primary action — never a game accent */
--bc-cold: #7DD3FC; /* the spotlight: focus rings, join codes, clocks */
/* ---- game accents (survive from brands/corporate.json via theme.css) */
--bc-blue: var(--brand-pink); /* keyed "pink" in the brand file — it is blue */
--bc-purple: var(--brand-purple);
--bc-green: var(--brand-green);
--bc-cyan: var(--brand-cyan);
--bc-orange: var(--brand-orange);
--bc-red: var(--brand-red);
--bc-amber: var(--brand-yellow); /* keyed "yellow" — it is amber, == signal */
/* ---- type ---------------------------------------------------------- */
--bc-text: #F2F6FC;
--bc-dim: #8FA3BE;
--bc-faint: #4A5D7A;
--bc-arch: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; /* display + body, width axis carries register */
--bc-mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* equipment only: codes, clocks */
/* ---- shape: crisp, separated by light not line --------------------- */
--bc-r: 4px; /* the system radius; everything */
--bc-r-lg: 8px; /* cards, dialogs, the big-screen frame */
--bc-lip: inset 0 2px 0 rgba(143,163,190,.16); /* a resting lit edge — replaces borders */
--bc-lip-lg: inset 0 3px 0 rgba(143,163,190,.16); /* the same on big-screen surfaces */
/* backgrounds */
--bc-bg-app:
radial-gradient(1100px 700px at 50% -10%, var(--bc-pool) 0%, rgba(22,35,58,0) 62%),
linear-gradient(180deg, #0d1626 0%, #070d18 100%);
--bc-bg-stage:
radial-gradient(1400px 900px at 50% -8%, var(--bc-pool) 0%, rgba(22,35,58,0) 64%),
linear-gradient(180deg, #0d1626 0%, #070d18 100%);
/* the primary surface fill (body + big-screen frame) — a token so skins can re-ground it */
--bc-field:
radial-gradient(1200px 760px at 50% -6%, var(--bc-pool) 0%, rgba(22,35,58,0) 62%),
linear-gradient(180deg, #0d1626 0%, #070d18 100%);
}
/* ============================================================================
Host-selectable skins — each is ONE set of --bc-* token overrides. Surfaces
apply one by setting data-skin on ; the game syncs it to every screen.
Phase 1 re-grounds colour + type-neutral tokens; the glow/scanline layer
(Aurora's full HUD treatment) is a later pass once surfaces route their
active-lip/glow through tokens.
========================================================================== */
:root[data-skin="aurora"]{ /* the ARIA / JARVIS holographic HUD */
--bc-void:#02060f; --bc-pool:#06131f; --bc-slate:#0a1626; --bc-slate-hi:#0e2436;
--bc-signal:#38e6ff; --bc-cold:#2b6bff;
--bc-text:#cfeeff; --bc-dim:#7fb4cc; --bc-faint:#3a6b82;
--bc-field: radial-gradient(1200px 800px at 50% 0%, #06182b 0%, #02060f 70%);
}
:root[data-skin="arena"]{ /* warm prime-time game show */
--bc-void:#0a0603; --bc-pool:#1a0f08; --bc-slate:#241610; --bc-slate-hi:#33200f;
--bc-signal:#FFB020; --bc-cold:#FFD23F;
--bc-text:#FFF6E9; --bc-dim:#C9A98A; --bc-faint:#6b4f38;
--bc-field:
radial-gradient(1200px 760px at 50% -6%, var(--bc-pool) 0%, rgba(26,15,8,0) 62%),
linear-gradient(180deg, #1a0f08 0%, #0a0603 100%);
}
:root[data-skin="neon"]{ /* synthwave — hot magenta on indigo */
--bc-void:#0c0518; --bc-pool:#14092a; --bc-slate:#1c0f3a; --bc-slate-hi:#2a1656;
--bc-signal:#ff2e97; --bc-cold:#22d3ee;
--bc-text:#f3e9ff; --bc-dim:#b79ad6; --bc-faint:#6c4f95;
--bc-field: radial-gradient(1200px 820px at 50% 0%, #26124e 0%, #0c0518 68%);
}
:root[data-skin="matrix"]{ /* terminal phosphor green on black */
--bc-void:#020604; --bc-pool:#04120a; --bc-slate:#061c0f; --bc-slate-hi:#0a2c18;
--bc-signal:#39ff14; --bc-cold:#7CFFB0;
--bc-text:#c9ffd6; --bc-dim:#5faf76; --bc-faint:#2f6b45;
--bc-field: radial-gradient(1200px 800px at 50% -6%, #06180d 0%, #020604 66%);
}
:root[data-skin="sunset"]{ /* deep plum into warm coral */
--bc-void:#160a1a; --bc-pool:#2a0f24; --bc-slate:#3a1630; --bc-slate-hi:#4e1d3f;
--bc-signal:#ff7e5f; --bc-cold:#ffb56b;
--bc-text:#ffe9e2; --bc-dim:#d19a9a; --bc-faint:#7a4f5f;
--bc-field: linear-gradient(180deg, #3a1630 0%, #160a1a 62%, #0d0510 100%);
}
/* ============================================================================
Shared keyframes — so surfaces don't each redeclare them
========================================================================== */
/* the wipe: a single bar of light crossing a slate as it is spotlit */
@keyframes bc-wipe { to { transform: translateX(100%); } }
/* the lift: a slate coming up out of rest */
@keyframes bc-stamp { from { transform: scale(1.8); opacity: 0 } to { transform: none; opacity: 1 } }
/* the on-air pulse */
@keyframes bc-beat { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
@media (prefers-reduced-motion: reduce){
*{ animation: none !important; transition: none !important; }
}