/* Chorus — design tokens for the merged Twitch + YouTube chat reader. One system. */

/* Self-hosted Geist + Geist Mono — no runtime Google-Fonts fetch. */
@font-face { font-family:'Geist'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/fonts/geist-400.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-weight:500; font-style:normal; font-display:swap;
  src:url('/fonts/geist-500.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-weight:600; font-style:normal; font-display:swap;
  src:url('/fonts/geist-600.woff2') format('woff2'); }
@font-face { font-family:'Geist Mono'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/fonts/geist-mono-400.woff2') format('woff2'); }
@font-face { font-family:'Geist Mono'; font-weight:500; font-style:normal; font-display:swap;
  src:url('/fonts/geist-mono-500.woff2') format('woff2'); }
@font-face { font-family:'Geist Mono'; font-weight:600; font-style:normal; font-display:swap;
  src:url('/fonts/geist-mono-600.woff2') format('woff2'); }

:root {
  color-scheme: dark;

  /* ── SURFACES (5 steps, cool near-black — NEVER #000) ───────────────── */
  --bg-app:        #0a0b0d;  /* outermost shell / page */
  --bg-panel:      #0f1012;  /* panels, video wrapper, chat rail base */
  --bg-raised:     #141518;  /* cards, raised cells */
  --bg-overlay:    #1a1b1f;  /* dropdowns, hover fills, hover card */
  --bg-subtle:     #202228;  /* input fills, secondary buttons */

  /* ── BORDERS (hairline white-alpha — elevation via BORDER, not shadow) ─ */
  --border-dim:    rgba(255,255,255,0.06);
  --border-base:   rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.16);
  --border-focus:  #3b82f6;  /* focus ring uses the accent */

  /* ── TEXT ───────────────────────────────────────────────────────────── */
  --text-primary:   #f0f0f2; /* ~14:1 — headings, key figures (NOT #fff) */
  --text-secondary: #a0a0a8; /* ~6:1 — UI body, labels */
  --text-chat:      #c8c8d0; /* chat message body — softer than primary to
                                kill halation fatigue over a long stream */
  --text-muted:     #6b6b72; /* timestamps, separators, metadata (UI only) */
  --text-disabled:  #3e3e44;
  --text-mention:   #e8e0b8; /* @mentions, warm */
  --text-ticker:    #7ec8e3; /* $HYPE $NVDA — terminal cyan (crypto flavor) */

  /* ── ACCENT (ONE hue — active/selected/CTA/focus only) ──────────────── */
  --accent:        #3b82f6;
  --accent-hover:  #60a5fa;
  --accent-dim:    rgba(59,130,246,0.15);

  /* ── STATUS (health dots + alert chips ONLY — never decorative) ─────── */
  --success: #22c55e;  --success-dim: rgba(34,197,94,0.12);
  --warning: #f59e0b;  --warning-dim: rgba(245,158,11,0.12);
  --danger:  #ef4444;  --danger-dim:  rgba(239,68,68,0.12);
  --pin:     #f5a623;  /* pinned-to-air highlight (amber, not red) */
  --live:    #ff4040;  /* LIVE pill / rec dot — single slow pulse, no glow */

  /* ── PLATFORM (the source glyph block + live dots are the ONLY brand fills) ── */
  --tw: #9146ff;  /* Twitch — white logo inside the glyph block */
  --yt: #f0282d;  /* YouTube — softened red (not #FF0000, harsh on near-black); white logo */
  /* lightened-for-contrast handle colors (≥4.5:1 on dark) */
  --tw-handle: #b794f6;
  --yt-handle: #ff6b74;

  /* ── TYPE ───────────────────────────────────────────────────────────── */
  --font-ui:   'Geist','Inter',system-ui,-apple-system,sans-serif;
  --font-mono: 'Geist Mono','JetBrains Mono',ui-monospace,monospace;
  --fs-2xs:10px; --fs-xs:11px; --fs-sm:12px; --fs-msg:13px;
  --fs-base:14px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px;
  --lh-tight:1.25; --lh-snug:1.35; --lh-normal:1.5;

  /* ── SPACE / RADIUS ─────────────────────────────────────────────────── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --r-sm:4px;   /* chips, badges, inputs — operator console, NOT pills */
  --r-md:6px;   /* buttons, cards */
  --r-lg:10px;  /* panels */
  --r-full:9999px; /* avatars + health dots ONLY */

  /* ── MOTION (calm-precise, no bounce; animate opacity/transform/color) ─ */
  --ease-out:   cubic-bezier(0,0,0.2,1);
  --ease-inout: cubic-bezier(0.4,0,0.2,1);
  --dur-instant:80ms; --dur-fast:150ms; --dur-normal:220ms;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
button, input, [role="button"] { touch-action:manipulation; }
body {
  background:var(--bg-app); color:var(--text-secondary);
  font-family:var(--font-ui); font-size:var(--fs-base);
  height:100dvh; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
/* every numeric display element: */
.tabular { font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"zero" 1; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
::-webkit-scrollbar { width:6px; } ::-webkit-scrollbar-thumb { background:#2a2a30; border-radius:3px; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
}