/* ============================================ Theme: CSS Custom Properties Light + Dark mode via [data-theme] on ============================================ */ :root { /* Shared values */ --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'SF Mono', 'Fira Code', monospace; --transition-theme: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease; --nav-height: 60px; } [data-theme="dark"] { --color-bg: #0a0a0f; --color-bg-section: #0d0d14; --color-text: #e8e8ef; --color-text-muted: #8899aa; --color-accent: #38bdf8; --color-accent-glow: rgba(56, 189, 248, 0.25); --color-card-bg: rgba(15, 25, 35, 0.85); --color-card-border: rgba(56, 189, 248, 0.15); --color-nav-bg: rgba(10, 10, 15, 0.9); --color-canvas-line: rgba(56, 189, 248, 0.1); --color-canvas-line-bright: rgba(56, 189, 248, 0.35); --color-timeline-line: rgba(56, 189, 248, 0.25); --color-marker: #38bdf8; } [data-theme="light"] { --color-bg: #f4f6f8; --color-bg-section: #eaeef2; --color-text: #0f1923; --color-text-muted: #4a5a6a; --color-accent: #0284c7; --color-accent-glow: rgba(2, 132, 199, 0.2); --color-card-bg: rgba(255, 255, 255, 0.88); --color-card-border: rgba(2, 132, 199, 0.2); --color-nav-bg: rgba(244, 246, 248, 0.9); --color-canvas-line: rgba(2, 132, 199, 0.1); --color-canvas-line-bright: rgba(2, 132, 199, 0.3); --color-timeline-line: rgba(2, 132, 199, 0.2); --color-marker: #0284c7; }