/* ────────────────────────────────────────────────────────────── DeckSide design tokens — shared across deckside.app surfaces. Mirror of the desktop app (meet-announcer-prototype/app/styles.css) :root block. Linked from every /index.html in this repo via . These tokens are the canonical names. Some surfaces have legacy page-level :root blocks that override a subset of these values for visual continuity. Migration to the canonical names is incremental — pages can override what they need to until they're refactored. ────────────────────────────────────────────────────────────── */ :root { /* Surfaces (background layers) */ --bg: #0f172a; /* page background — slate-900 */ --bg-elevated: #1e293b; /* cards, modals — slate-800 */ --bg-card: #273449; /* hover/active surfaces */ --border: #334155; /* dividers, button borders */ /* Text */ --text: #f1f5f9; /* primary text — slate-100 */ --text-muted: #94a3b8; /* secondary text — slate-400 */ --text-dim: #64748b; /* tertiary text — slate-500 */ /* Brand accent (cyan — used for logo, primary CTAs, links) */ --accent: #38bdf8; /* sky-400 */ --accent-strong: #0ea5e9; /* sky-500 */ /* Primary (green — used for "go" CTAs, success states) */ --primary: #10b981; /* emerald-500 */ --primary-strong: #059669; /* emerald-600 */ --primary-text: #f0fdf4; /* emerald-50 */ /* Status colors */ --warn: #f59e0b; /* amber-500 */ --warn-bg: #78350f; /* amber-900 */ --danger: #ef4444; /* red-500 */ --danger-bg: #7f1d1d; /* red-900 */ --success: #22c55e; /* green-500 */ --success-bg: #14532d; /* green-900 */ /* Splash fade-target — matches deckside-intro.mp4's fade-out color, so the intro overlay can dismiss seamlessly. */ --splash-navy: #0b1220; /* Typography */ --font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-mono: "SF Mono", Menlo, Consolas, "Courier New", monospace; /* Common radii / shadows */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-modal: -6px 0 24px rgba(0, 0, 0, 0.5); } /* Light theme — flip with data-theme="light" on . Not yet used on the public site; included for parity with the desktop app so the tokens are ready when we wire a theme toggle. */ [data-theme="light"] { --bg: #f8fafc; --bg-elevated: #f1f5f9; --bg-card: #e2e8f0; --border: #cbd5e1; --text: #0f172a; --text-muted: #475569; --text-dim: #94a3b8; --accent: #0284c7; --accent-strong: #0369a1; --primary: #059669; --primary-strong: #047857; --primary-text: #064e3b; --warn: #d97706; --warn-bg: #fef3c7; --danger: #dc2626; --danger-bg: #fee2e2; --success: #16a34a; --success-bg: #dcfce7; }