/* * Design tokens — sourced from DESIGN.md. * Theme-switched via [data-theme="dark|light"] on . */ :root { /* Type system — single-family commitment */ --font-sans: 'Raleway', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Type scale (matches LaTeX 10pt baseline) */ --type-display-size: clamp(2rem, 4.5vw, 2.75rem); --type-display-tracking: 0.08em; --type-headline-size: 0.95rem; --type-title-size: 0.875rem; --type-body-size: 0.875rem; --type-label-size: 0.7rem; --type-subtitle-size: 0.78rem; /* Two-weight rule */ --weight-regular: 400; --weight-bold: 700; /* Spacing scale (matches LaTeX pt-based scale) */ --space-xs: 0.125rem; --space-sm: 0.25rem; --space-md: 0.5rem; --space-lg: 0.75rem; --space-xl: 1rem; --space-2xl: 1.5rem; --space-3xl: 2rem; /* Page geometry — A4-equivalent feel, web-adapted. Resume reads on a screen, not a sheet, so we cap width and let it breathe vertically. */ --page-margin-y: 2rem; --page-margin-x: 2rem; --page-max-width: 52rem; /* Hairline weight — DESIGN.md mandates 0.4pt; on screens that's effectively 1px subpixel */ --hairline-weight: 1px; /* Motion — exponential ease-out only, no bounce/elastic */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 160ms; --duration-base: 240ms; } /* ---- Dark theme (canonical) ---- */ :root[data-theme='dark'] { --color-surface: oklch(16% 0.008 80); --color-type: oklch(94% 0.005 80); --color-mid-type: oklch(70% 0.008 80); --color-hairline: oklch(28% 0.008 80); --color-accent: oklch(72% 0.13 75); --color-accent-soft: oklch(72% 0.13 75 / 0.18); color-scheme: dark; } /* ---- Light theme (parity) ---- */ :root[data-theme='light'] { --color-surface: #ffffff; --color-type: oklch(18% 0.005 80); --color-mid-type: oklch(50% 0.005 80); --color-hairline: oklch(89% 0.003 80); --color-accent: oklch(50% 0.16 55); --color-accent-soft: oklch(50% 0.16 55 / 0.12); color-scheme: light; }