:root { /* Container */ --container-width: 140rem; /* Brand */ --color-accent: #87cefa; --color-accent-dark: #28a7f6; /* --color-accent: #1D9E75; --color-accent-dark: #177a5a; */ --color-accent-text: #ffffff; /* Backgrounds — light mode (default) */ --color-bg-page: #f4f4f6; --color-bg-base: #ffffff; --color-bg-surface: #f0f0f3; --color-bg-raised: #e8e8ec; --color-bg-overlay: rgba(0, 0, 0, 0.3); /* Borders */ --color-border-subtle: #e0e0e6; --color-border-base: #cacad0; --color-border-strong: #b0b0b8; /* Text */ --color-text-primary: #111114; --color-text-secondary:#555560; --color-text-muted: #9999a8; /* --color-text-accent: #1D9E75; */ --color-text-accent: #5d89ca; /* Semantic */ --color-blue: #378ADD; --color-amber: #EF9F27; --color-danger: #E24B4A; /* Typography */ --font-sans: 'DM Sans', system-ui, sans-serif; --font-display: 'Syne', system-ui, sans-serif; /* Spacing scale (1rem = 10px at 62.5% base) */ --space-1: 0.4rem; --space-2: 0.8rem; --space-3: 1.2rem; --space-4: 1.6rem; --space-5: 2.0rem; --space-6: 2.4rem; --space-8: 3.2rem; --space-10: 4.0rem; --space-12: 4.8rem; /* Layout */ --topbar-height: 5.8rem; /* Radii */ --radius-sm: 0.6rem; --radius-md: 0.8rem; --radius-lg: 1.2rem; --radius-xl: 1.6rem; --radius-full: 999rem; /* Transitions */ --transition-fast: 0.12s ease; --transition-base: 0.2s ease; } /* ════════════════════════════════════ Dark mode token overrides Applied when ════════════════════════════════════ */ [data-theme="dark"] { /* Backgrounds */ --color-bg-page: #0a0a0c; --color-bg-base: #0e0e10; --color-bg-surface: #141416; --color-bg-raised: #1a1a1e; --color-bg-overlay: rgba(0, 0, 0, 0.55); /* Borders */ --color-border-subtle: #1e1e22; --color-border-base: #2a2a2e; --color-border-strong: #3a3a40; /* Text */ --color-text-primary: #f0f0f0; --color-text-secondary:#888888; --color-text-muted: #444444; --color-text-accent: #5d89ca; /* --color-text-accent: #5DCAA5; */ /* Brand — slightly brighter for dark backgrounds */ /* --color-accent: #5DCAA5; --color-accent-dark: #1D9E75; --color-accent-text: #04342C;*/ --color-accent: #8acdf7; --color-accent-dark: #40b1f7; --color-accent-text: #065789; }