/* ============================================================ tokens.css All design tokens live here. Edit this file to restyle. ------------------------------------------------------------ Light theme is the default. A dark theme can be added by reassigning the --color-* tokens inside a media query or a [data-theme="dark"] selector at the bottom of this file. ============================================================ */ :root { /* ----- Font families ----- Both display and body use Inter. The display cut comes from Inter's optical-size axis (opsz) — enabled in styles.css via `font-optical-sizing: auto`. Larger sizes automatically render using the Inter Display cut. */ --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* ----- Type scale ----- Pangram Pangram guidance (Web): Caption 12–14px · Body 16–20px · Subhead 24–36px · Headline 40–60px Body is set first; the rest scale relative to it. Caption→Body uses a tight ratio; headings use a looser ratio so the squint-test hierarchy is unambiguous. */ --font-size-00: 0.75rem; /* 12px — fine print / tags */ --font-size-0: 0.875rem; /* 14px — meta / labels / caption */ --font-size-1: 1.0625rem; /* 17px — body default */ --font-size-2: 1.375rem; /* 22px — lead paragraph */ --font-size-3: 1.75rem; /* 28px — h3 subhead */ --font-size-4: 2.25rem; /* 36px — h2 subhead max */ --font-size-5: 3rem; /* 48px — h1 on project pages */ --font-size-6: 4rem; /* 64px — hero h1 on landing */ /* ----- Font weights ----- Pangram: "medium weights often provide better optical balance on screens than bold." */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ----- Line heights ----- Pangram: 120–140% for display/headlines, 140–160% for body. Larger display sizes get tighter leading; body and prose get generous leading for readability. */ --line-height-display: 1.05; /* hero h1 */ --line-height-tight: 1.15; /* h1 / h2 */ --line-height-snug: 1.25; /* h3, lead */ --line-height-normal: 1.6; /* body prose */ /* ----- Spacing scale (ratio ~1.5) ----- Used by .stack --space, .box --box-padding, and any rhythm-driven gap. */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.25rem; --space-xl: 3.375rem; --space-2xl: 5rem; --space-3xl: 7.5rem; /* ----- Colors — neutral monochrome (Animate UI-inspired) ----- Fully achromatic OKLCH scale: every value is `oklch(L% 0 0)` with zero chroma. Hierarchy comes from lightness contrast alone — no hue, no warmth. Lightness ladder matches Animate UI's defaults. */ --color-bg: oklch(98.5% 0 0); /* ~#fafafa — page */ --color-surface: oklch(100% 0 0); /* ~#ffffff — cards / elevated */ --color-ink: oklch(14.5% 0 0); /* near-black neutral */ --color-ink-muted: oklch(32% 0 0); /* near-ink secondary text — high contrast */ --color-rule: oklch(92.2% 0 0); /* hairline borders */ --color-accent: oklch(20.5% 0 0); /* dark gray (subtle emphasis) */ --color-accent-ink: oklch(98.5% 0 0); --color-focus: oklch(14.5% 0 0); /* monochrome focus ring */ /* Body radial-gradient blob color — themed (kept here so palette swaps re-color the page texture, not just the surfaces). */ --color-bg-blob: oklch(94% 0 0); /* Orb (landing page only) — OKLCH components so canvas can read them at runtime and rebuild the gradient on theme change. */ --orb-lightness: 92; --orb-chroma: 0.06; --orb-hue: 240; /* ----- Layout tokens ----- */ --measure: 65ch; /* readable line length used by .center */ --grid-min: 18rem; /* min track width for .grid auto-fit */ --frame-ratio: 16 / 9; /* default aspect ratio for .frame */ --box-padding: var(--space-l); --box-border-color: var(--color-rule); --box-border-width: 1px; --box-radius: 0.75rem; /* medium — applies to boxes and frames */ /* ----- Misc ----- */ --transition-fast: 140ms ease-out; --focus-ring-width: 3px; --content-padding-inline: var(--space-m); /* page gutter */ } /* ============================================================ Theme variants ------------------------------------------------------------ The :root block above defines the default "neutral" palette. These selectors override only the color tokens — type scale, spacing, radii, etc. stay the same across themes. Switch by setting `data-theme="pastel"` or `data-theme="dark"` on the element. See js/theme.js. ============================================================ */ [data-theme="pastel"] { --color-bg: oklch(96% 0.025 75); /* warm cream */ --color-surface: oklch(98.5% 0.015 75); /* lighter cream */ --color-ink: oklch(22% 0.04 30); /* warm espresso */ --color-ink-muted: oklch(45% 0.04 30); /* dusty warm gray */ --color-rule: oklch(86% 0.05 60); /* butter hairline */ --color-accent: oklch(65% 0.14 25); /* soft terracotta */ --color-accent-ink: oklch(98% 0.01 75); --color-focus: oklch(22% 0.04 30); --color-bg-blob: oklch(92% 0.05 60); --orb-lightness: 88; --orb-chroma: 0.10; --orb-hue: 25; /* warm peach */ } [data-theme="dark"] { --color-bg: oklch(20% 0.04 260); /* dark navy */ --color-surface: oklch(24% 0.035 260); /* slightly lighter navy */ --color-ink: oklch(98% 0 0); /* white */ --color-ink-muted: oklch(75% 0.01 260); /* navy-tinted light gray */ --color-rule: oklch(32% 0.03 260); /* mid-navy hairline */ --color-accent: oklch(62% 0.18 30); /* burnt orange / blood */ --color-accent-ink: oklch(98% 0 0); --color-focus: oklch(75% 0.18 35); /* bright orange focus */ --color-bg-blob: oklch(26% 0.05 260); --orb-lightness: 65; --orb-chroma: 0.20; --orb-hue: 35; /* orange blood */ }