/* * tokens.css — Single source of truth for all design tokens. * * Theming works in two layers: * 1. :root defines the default (light) palette * 2. [data-theme="dark"] overrides for dark mode * 3. prefers-color-scheme: dark is honored when no explicit theme is set * * All colors, shadows, and surface treatments are expressed as CSS custom * properties so that JS (canvas drawings) can read them live via * getComputedStyle and repaint on theme switch. * * This is a strict monochrome palette — pure black/white only. */ :root { /* ---------- Typography: Families (self-hosted Roboto) ---------- */ /* All small UI labels (was Roboto Mono) now use Roboto with weight 500+ * because Roboto Mono pixelates at 12–13px on non-Retina displays. */ --font-display: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ---------- Typography: Scale ---------- */ --fs-mono: 0.8125rem; /* 13px (was 12) — UI labels */ --fs-meta: 0.875rem; /* 14px (was 13) — metadata */ --fs-body: 1.0625rem; /* 17px */ --fs-lead: 1.25rem; /* 20px */ --fs-h3: 1.5rem; /* 24px */ --fs-h2: clamp(2rem, 4vw, 3.5rem); /* 32 → 56 */ --fs-h1: clamp(2.75rem, 8vw, 9rem); /* 44 → 144 */ --fs-display: clamp(3.25rem, 11vw, 11.5rem); /* 52 → 184 */ /* ---------- Typography: Rhythm ---------- */ --lh-tight: 1.02; --lh-snug: 1.18; --lh-normal: 1.5; --lh-relaxed: 1.65; --tr-tight: -0.035em; --tr-display: -0.045em; --tr-normal: 0; --tr-wide: 0.08em; --tr-wider: 0.14em; /* Variable-font weights (Roboto supports 100-900) */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-display: 800; /* ---------- Spacing: 8px baseline ---------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ --space-11: 12rem; /* 192 */ /* ---------- Layout ---------- */ --container-max: 1440px; --container-pad-mobile: 1.5rem; --container-pad-desktop: 5rem; /* ---------- Dot Grid (cursor-reactive canvas) ---------- */ --grid-spacing: 18px; /* compact grid cell */ --grid-dot-color: 255, 255, 255; --grid-dot-opacity: 0.28; /* ---------- Motion ---------- */ --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* subtle bounce */ --dur-quick: 140ms; --dur-base: 240ms; --dur-medium: 400ms; --dur-slow: 600ms; --dur-page: 900ms; --dur-theme: 700ms; --stagger: 60ms; /* ---------- Z-index ---------- */ --z-canvas: 0; --z-content: 10; --z-nav: 50; --z-overlay: 100; --hairline-width: 1px; /* * ===================================================== * THEME: LIGHT (default) — warm paper-white * ===================================================== */ --color-bg: #FAF7F0; --color-bg-elevated: #F5F1E8; --color-bg-sunk: #EDE8DC; --color-fg: #1A1710; --color-fg-soft: #2A2620; --color-muted: #6E6A5E; --color-faint: #B8B3A5; --color-hairline: #E6E0D2; --color-hairline-strong: #CFC9B8; --color-dot-active: 26, 23, 16; --grid-dot-color: 26, 23, 16; --grid-dot-opacity: 0.24; --pill-bg: #EFE9D8; --pill-border: #CFC9B8; --pill-bg-hover: var(--color-fg); --pill-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 20px -10px rgba(26, 23, 16, 0.14); --pill-shadow-hover: 0 16px 36px -14px rgba(26, 23, 16, 0.22); --pill-shadow-solid: 0 14px 30px -14px rgba(26, 23, 16, 0.22); --pill-shadow-solid-hover: 0 22px 44px -18px rgba(26, 23, 16, 0.32); --shadow-sm: 0 1px 0 rgba(26, 23, 16, 0.04), 0 14px 36px -22px rgba(26, 23, 16, 0.18); --shadow-lg: 0 30px 60px -28px rgba(26, 23, 16, 0.18); --shadow-phone: 0 40px 90px -30px rgba(26, 23, 16, 0.24); color-scheme: light; } /* * ===================================================== * THEME: DARK (manual opt-in) — pure monochrome * ===================================================== */ [data-theme="dark"] { --color-bg: #000000; --color-bg-elevated: #0A0A0A; --color-bg-sunk: #050505; --color-fg: #FFFFFF; --color-fg-soft: #E6E6E6; --color-muted: #9A9A9A; --color-faint: #5C5C5C; --color-hairline: #1F1F1F; --color-hairline-strong: #2E2E2E; --color-dot-active: 255, 255, 255; --grid-dot-color: 255, 255, 255; --grid-dot-opacity: 0.18; --pill-bg: #161616; --pill-border: #333333; --pill-bg-hover: var(--color-fg); --pill-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 24px -12px rgba(0, 0, 0, 0.7); --pill-shadow-hover: 0 18px 40px -16px rgba(0, 0, 0, 0.85); --pill-shadow-solid: 0 14px 32px -14px rgba(0, 0, 0, 0.55); --pill-shadow-solid-hover: 0 22px 44px -16px rgba(0, 0, 0, 0.7); --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px -16px rgba(0, 0, 0, 0.6); --shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, 0.65); --shadow-phone: 0 36px 80px -28px rgba(0, 0, 0, 0.8); color-scheme: dark; } /* * ===================================================== * System preference fallback * ===================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: #000000; --color-bg-elevated: #0A0A0A; --color-bg-sunk: #050505; --color-fg: #FFFFFF; --color-fg-soft: #E6E6E6; --color-muted: #9A9A9A; --color-faint: #5C5C5C; --color-hairline: #1F1F1F; --color-hairline-strong: #2E2E2E; --color-dot-active: 255, 255, 255; --grid-dot-color: 255, 255, 255; --grid-dot-opacity: 0.18; --pill-bg: #161616; --pill-border: #333333; --pill-bg-hover: var(--color-fg); --pill-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 24px -12px rgba(0, 0, 0, 0.7); --pill-shadow-hover: 0 18px 40px -16px rgba(0, 0, 0, 0.85); --pill-shadow-solid: 0 14px 32px -14px rgba(0, 0, 0, 0.55); --pill-shadow-solid-hover: 0 22px 44px -16px rgba(0, 0, 0, 0.7); --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px -16px rgba(0, 0, 0, 0.6); --shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, 0.65); --shadow-phone: 0 36px 80px -28px rgba(0, 0, 0, 0.8); color-scheme: dark; } } /* * Smooth cross-fade between themes (used as fallback when the * View Transitions API is unavailable). Scoped to color/background/border * so it never bleeds into layout. */ html.is-theming, html.is-theming * { transition: background-color var(--dur-theme) var(--ease-out-soft), color var(--dur-theme) var(--ease-out-soft), border-color var(--dur-theme) var(--ease-out-soft), fill var(--dur-theme) var(--ease-out-soft), stroke var(--dur-theme) var(--ease-out-soft) !important; }