/* Design tokens. Edit colors, spacing, and type here once — they cascade everywhere. Keep names semantic (color-text, color-bg) rather than literal (color-grey-9). */ :root { /* Colors — DARK is the default */ --color-bg: #0f0f12; --color-surface: #1a1a1f; --color-surface-muted: #232329; --color-surface-translucent: rgba(26, 26, 31, 0.55); /* sticky bars + glass elements */ --color-text: #f4f4f5; --color-text-muted: #a1a1aa; --color-border: #2c2c33; --color-link: #8ab4ff; --color-eyebrow: #29B6F6; /* brighter cyan for dark mode */ --color-brand: #29B6F6; /* logo color — bright cyan for dark mode */ /* Accent colors for bento cards */ --color-accent-1: #ffd166; --color-accent-2: #b8e1ff; --color-accent-3: #ffb4a2; /* Typography */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: var(--font-sans); --text-xs: 0.8125rem; /* 13px */ --text-sm: 0.9375rem; /* 15px */ --text-base: 1.0625rem; /* 17px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 2rem; /* 32px */ --text-3xl: 2.75rem; /* 44px */ /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; /* Radii */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; /* Layout */ --container-max: 1100px; } /* Theme handling. Dark is the default (set above on :root). The toggle writes [data-theme="light"] or [data-theme="dark"] on . Only the "light" case needs an override here — "dark" matches the default. */ :root[data-theme="light"] { --color-bg: #fafaf7; --color-surface: #ffffff; --color-surface-muted: #f1efe9; --color-surface-translucent: rgba(255, 255, 255, 0.6); --color-text: #16161a; --color-text-muted: #5b5b66; --color-border: #e3e1d9; --color-link: #2b5cff; --color-eyebrow: #1c75bc; /* original brand blue for light mode */ --color-brand: #1c75bc; /* logo color — original brand blue for light mode */ } /* Let native UI (scrollbars, form controls) match the theme */ html { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } /* Smooth fade when flipping themes */ body { transition: background-color 0.2s ease, color 0.2s ease; }