/* ============================================================ txtbroadcast — shared design tokens Visual language borrows from the broadcast control room: tally lights (on-air red), the pending/approved states read like a vision-mixer's status lamps, and timestamps/codes sit in a monospace data face. Audience-facing surfaces stay warm paper; backstage (admin) and the big screen (broadcast) stay in the dark "control room" register. ============================================================ */ :root { --ink: #14172a; --ink-soft: #1c2038; --ink-line: rgba(255, 255, 255, 0.09); --paper: #f6f3ec; --paper-ink: #1b1b18; --paper-line: rgba(20, 20, 16, 0.12); --signal: #ff5d3a; --signal-dim: rgba(255, 93, 58, 0.16); --amber: #f0a93a; --amber-dim: rgba(240, 169, 58, 0.16); --jade: #22b378; --jade-dim: rgba(34, 179, 120, 0.16); --mist: #8b8fa3; --mist-on-paper: #767567; --font-body: "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; color-scheme: light dark; } /* ---------- themeable surface (join + broadcast pages only) ---------- admin/mod stay fixed dark control-room chrome; these semantic tokens let join.css/broadcast.css follow a room's chosen light/dark theme via [data-theme] on , set at runtime by applyRoomAppearance() in fonts.js. Defaults to dark until a room's theme is known. */ :root, :root[data-theme="dark"] { --surface-bg: var(--ink); --surface-panel: var(--ink-soft); --surface-text: #f3f2f8; --surface-mist: var(--mist); --surface-line: var(--ink-line); --surface-overlay: rgba(255, 255, 255, 0.05); } :root[data-theme="light"] { --surface-bg: var(--paper); --surface-panel: #ffffff; --surface-text: var(--paper-ink); --surface-mist: var(--mist-on-paper); --surface-line: var(--paper-line); --surface-overlay: rgba(20, 20, 16, 0.04); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button, input, textarea { font-family: inherit; } :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } .on-air { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--signal); } .on-air::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 rgba(255, 93, 58, 0.55); animation: pulse 1.8s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 93, 58, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(255, 93, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 93, 58, 0); } }