/* ========================================================================== CSS VARIABLES & THEME SYSTEM Dark mode is the default. Light mode toggled via [data-theme="light"] on . ========================================================================== */ :root { /* Dark theme (default) */ --bg: #0b1120; --bg-surface: #111827; --bg-card: #1a2332; --bg-card-hover: #1f2b3d; --bg-nav: #0f1929; --text: #e8e6e3; --text-secondary: #9ca3af; --text-muted: #6b7280; --border: #2d3748; --border-light: #374151; --accent: #4ecdc4; --accent-dim: #2a7a74; --primary: #60a5fa; --primary-dim: #1a3a5c; /* Role colors */ --clr-judge: #60a5fa; --clr-judge-bg: rgba(96,165,250,0.08); --clr-prosecution: #6ee7b7; --clr-prosecution-bg: rgba(110,231,183,0.08); --clr-defense: #fdba74; --clr-defense-bg: rgba(253,186,116,0.08); --clr-objection: #fca5a5; --clr-objection-bg: rgba(252,165,165,0.08); --clr-observer: #c4b5fd; --clr-observer-bg: rgba(196,181,253,0.08); /* Misc */ --shadow: 0 1px 3px rgba(0,0,0,0.3); --shadow-hover: 0 4px 16px rgba(0,0,0,0.4); --radius: 8px; --radius-lg: 12px; --transition: 0.2s ease; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace; /* Sidebar */ --sidebar-w: 280px; /* Fluid typography */ --font-h1: clamp(1.2rem, 4vw, 1.6rem); --font-h1-sub: clamp(0.78rem, 2.5vw, 0.88rem); --font-phase-label: clamp(0.92rem, 2.8vw, 1.05rem); --font-tab-label: clamp(1rem, 3vw, 1.15rem); } /* Light theme overrides */ [data-theme="light"] { --bg: #f0f2f5; --bg-surface: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f9fafb; --bg-nav: #ffffff; --text: #1f2937; --text-secondary: #4b5563; --text-muted: #9ca3af; --border: #e5e7eb; --border-light: #d1d5db; --accent: #0d9488; --accent-dim: #ccfbf1; --primary: #1a56db; --primary-dim: #dbeafe; --clr-judge: #1a56db; --clr-judge-bg: rgba(26,86,219,0.06); --clr-prosecution: #047857; --clr-prosecution-bg: rgba(4,120,87,0.06); --clr-defense: #c2410c; --clr-defense-bg: rgba(194,65,12,0.06); --clr-objection: #dc2626; --clr-objection-bg: rgba(220,38,38,0.06); --clr-observer: #7c3aed; --clr-observer-bg: rgba(124,58,237,0.06); --shadow: 0 1px 3px rgba(0,0,0,0.08); --shadow-hover: 0 4px 12px rgba(0,0,0,0.12); }