/* Design tokens — light theme (default) */ :root { --font-base: 'Inter', 'Open Sans', sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --bg: #e9e9e9; --surface: #efefef; --surface-alt: #f9fafb; --surface-gray: #F0F0F0; --navbar-bg: #292929; --navbar-active: #393939; --primary: #1e5fa8; --primary-dark: #154080; --text: #1a1a1a; --text-muted: #848484; --link: #1e5fa8; --link-hover: #154080; --link-visited: #4a7fbe; --border: #C0C0C0; --shadow: #7d8e8f; --btn-bg: #e0ebf6; --btn-bg-end: #bcd0e8; --btn-text: #1a3a68; --btn-border: #8ab4d8; --btn-hover-bg: #2a6dc2; --btn-hover-bg-end: #1a4a90; --btn-hover-text: #ffffff; --btn-hover-border: #1a4a90; } /* Dark theme overrides — applied when */ [data-theme="dark"] { --bg: #1c1c1e; --surface: #2a2a2e; --surface-alt: #252528; --surface-gray: #2e2e32; --navbar-bg: #292929; --navbar-active: #3a3a3a; --primary: #6ba8d8; --primary-dark: #4a85c2; --text: #e0d8d0; --text-muted: #a0a0a0; --link: #6ba8d8; --link-hover: #8abce8; --link-visited: #5a90c0; --border: #4a4a4e; --shadow: #0d0d0d; --btn-bg: #1a3258; --btn-bg-end: #122440; --btn-text: #88b4d4; --btn-border: #264870; --btn-hover-bg: #2a62b0; --btn-hover-bg-end: #1a4a8a; --btn-hover-text: #e8f2fa; --btn-hover-border: #3a72c2; }