:root { --font-primary: 'Butler', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-title: 'Butler', Impact, 'Arial Black', sans-serif; --font-brand: 'Butler', 'Courier New', Courier, monospace; --font-mono: var(--font-brand); --text-xs: 0.75rem; --text-sm: 0.85rem; --text-md: 1rem; --text-lg: 1.25rem; --color-accent: #ff4500; /* Fixed white, independent of theme — used only by navbar elements that rely on mix-blend-mode: difference for automatic contrast against any backdrop (see layout/header.css). Swapping this per theme would break that effect. */ --nav-ink: #ffffff; /* Dark theme (default) surface + ink tokens. Everything below is what actually renders unless [data-theme="light"] is set on . */ --color-bg-dark: #111111; --color-bg-dark-rgb: 17, 17, 17; --color-surface: #1a1a1a; --color-text-light: #f5f5f5; --color-text-dim: rgba(255, 255, 255, 0.7); /* RGB channel list (no wrapping function) so call sites can write rgba(var(--ink), 0.2) and get the right translucent tint per theme. */ --ink: 255, 255, 255; /* Back-compat aliases already referenced by some components. */ --color-bg: var(--color-bg-dark); --color-text: var(--color-text-light); --text-secondary: var(--color-text-dim); --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 2rem; --spacing-lg: 3rem; --spacing-xl: 5rem; --spacing-2xl: 10rem; --spacing-3xl: 15rem; --spacing-4xl: 20rem; } :root[data-theme='light'] { --color-bg-dark: #f4f2ee; --color-bg-dark-rgb: 244, 242, 238; --color-surface: #ffffff; --color-text-light: #17181c; --color-text-dim: rgba(15, 16, 20, 0.65); --ink: 15, 16, 20; } body.theme-dark { background-color: var(--color-bg-dark); color: var(--color-text-light); transition: background-color 0.3s ease, color 0.3s ease; }