/* ========================================================================== variables.css — Design tokens & theme palette -------------------------------------------------------------------------- Palette: Catppuccin Macchiato (dark, default on :root) / Latte (light, on :root.light). Dark is the default theme; theme-init.js toggles `.light` on before first paint (see design.md). Requirement 7.1 — themed tokens drive the 300ms color transition. Requirement 9.5 — every text/background token pair must meet WCAG AA: >= 4.5:1 for normal text (<= 18px, or 14px bold), >= 3:1 for large text, in BOTH themes. CONTRAST NOTES -------------------------------------------------------------------------- Contrast was verified against every surface a given text token can sit on. The binding (worst-case) surface is: - Dark theme: --card (#363a4f), the LIGHTEST dark surface. - Light theme: --card (#ccd0da), the DARKEST light surface. A token that passes on its binding surface also passes on --bg / --panel. Dark (Macchiato) tokens were already accessible and are kept unchanged: text #cad3f5 on card -> 7.5:1 muted #a5adcb on card -> 4.97:1 link #8bd5ca on card -> 6.6:1 code #eed49f on card -> 7.5:1 brand #8aadf4 as text on card -> 4.93:1 (on --bg -> 7.1:1) Light (Latte) tokens were DARKENED to pass 4.5:1 on --card (#ccd0da). The original Latte values failed and were adjusted (aesthetic preserved): --muted #6c6f85 -> #52556b (was 4.4:1 on --bg / ~3.2:1 on card -> now 4.75:1 on card) --link #04a5e5 -> #0a4bb3 (bright sky was 2.5:1 -> now 5.1:1 on card) --code #df8e1d -> #7a4600 (bright peach was 2.4:1 -> now 5.0:1 on card) --brand #1e66f5 -> #1a5fd8 (was 4.39:1 as text on --bg -> now 5.1:1) Cyan/peach accents cannot reach 4.5:1 on a light surface, so light-theme link/code shift toward darker blue/amber while keeping the Catppuccin feel. --on-brand: text color to place ON a --brand-filled background (e.g. the active filter/nav pill). Brand is LIGHT in dark theme, so on-brand is dark; brand is DARK in light theme, so on-brand is white. dark: #1e2030 on #8aadf4 -> 7.1:1 light: #ffffff on #1a5fd8 -> 5.7:1 --brand AS TEXT: only the sticky-header surface (== --bg) renders brand as text (the active nav link), where it passes: dark 7.2:1, light 5.1:1. On card/panel surfaces --brand is used ONLY as a fill (paired with --on-brand) or as a non-text border/progress accent, so the brand-on-card ratio (light 3.7:1) is never a text pairing and does not apply to Req 9.5. ========================================================================== */ :root { /* ---- Theme-independent design tokens ---------------------------------- */ --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-serif: 'Merriweather', Georgia, 'Times New Roman', serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --container-max: 980px; --header-height: 64px; --header-height-compact: 46px; /* >= 25% shorter than default (Req 4.4) */ --radius-sm: 12px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 24px; --radius-pill: 999px; --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; /* Motion */ --stagger-delay: 80ms; /* Req 3.2 — delay between staggered items */ --transition-theme: 300ms; /* Req 7.1 — bg-color/color theme fade */ --transition-fast: 200ms; --transition-med: 300ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --z-header: 50; --z-progress: 60; --z-cursor: 90; /* ---- Dark theme — Catppuccin Macchiato (default) ---------------------- */ --bg: #1e2030; --panel: #24273a; --card: #363a4f; --text: #cad3f5; --muted: #a5adcb; --brand: #8aadf4; --on-brand: #1e2030; /* dark text on the light brand fill */ --ring: rgba(138, 173, 244, 0.35); --link: #8bd5ca; --code: #eed49f; /* Decorative accents (non-text) */ --brand-accent: #c6a0f6; /* used with --brand in gradients/dots */ } /* ---- Light theme — Catppuccin Latte (contrast-adjusted) ----------------- */ :root.light { --bg: #eff1f5; --panel: #e6e9ef; --card: #ccd0da; --text: #4c4f69; --muted: #52556b; /* darkened from #6c6f85 for 4.5:1 on card */ --brand: #1a5fd8; /* darkened from #1e66f5 for 4.5:1 as text */ --on-brand: #ffffff; /* white text on the dark brand fill */ --ring: rgba(26, 95, 216, 0.30); --link: #0a4bb3; /* darkened from sky #04a5e5 for 4.5:1 */ --code: #7a4600; /* darkened from peach #df8e1d for 4.5:1 */ --brand-accent: #8839ef; }