/** * CSS Custom Properties - Theme System * * Light theme is the default. Dark theme activates via [data-theme="dark"]. * System preference is respected via JavaScript that sets the data-theme * attribute on before CSS loads (see research pitfall 7: FOUWT). */ /* Light theme (default) */ :root, [data-theme="light"] { --bg-primary: #ffffff; --bg-secondary: #f5f5f7; --bg-tertiary: #e8e8ec; --text-primary: #1a1a2e; --text-secondary: #4a4a6a; --accent: #3b82f6; --accent-hover: #2563eb; --border: #d1d5db; --danger: #ef4444; --success: #22c55e; --input-bg: #ffffff; --shadow: 0 1px 3px rgba(0, 0, 0, 0.12); /* Typography */ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace; /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Transitions */ --transition: 150ms ease; } /* Dark theme */ [data-theme="dark"] { --bg-primary: #1a1a2e; --bg-secondary: #16213e; --bg-tertiary: #0f3460; --text-primary: #e2e8f0; --text-secondary: #94a3b8; --accent: #3b82f6; --accent-hover: #60a5fa; --border: #334155; --danger: #f87171; --success: #4ade80; --input-bg: #1e293b; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }