/* Webfonts load from CDN (no binaries provided). Flagged in readme. */ @import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Spline+Sans+Mono:wght@400;500&display=swap'); :root { /* Base — warm stone neutrals, dark-first */ --bg-0: oklch(0.145 0.006 75); --bg-1: oklch(0.185 0.007 75); --bg-2: oklch(0.225 0.008 75); --bg-3: oklch(0.27 0.009 75); --line-1: oklch(0.33 0.01 75); --line-2: oklch(0.255 0.008 75); --fg-1: oklch(0.965 0.004 85); --fg-2: oklch(0.74 0.01 80); --fg-3: oklch(0.56 0.012 78); --fg-inverse: oklch(0.17 0.006 75); /* Semantic status (used sparingly) */ --ok: oklch(0.78 0.11 155); --warn: oklch(0.8 0.11 75); --danger: oklch(0.68 0.16 25); /* Aliases */ --surface-page: var(--bg-0); --surface-raised: var(--bg-1); --surface-card: var(--bg-2); --surface-hover: var(--bg-3); --text-body: var(--fg-1); --text-muted: var(--fg-2); --text-caption: var(--fg-3); --border-card: var(--line-2); --border-strong: var(--line-1); --btn-primary-bg: var(--fg-1); --btn-primary-fg: var(--fg-inverse); } /* Light mode — set data-theme="light" on */ :root[data-theme="light"] { --bg-0: oklch(0.975 0.004 85); --bg-1: oklch(0.95 0.005 85); --bg-2: oklch(0.925 0.006 82); --bg-3: oklch(0.885 0.007 82); --line-1: oklch(0.8 0.008 80); --line-2: oklch(0.87 0.007 80); --fg-1: oklch(0.17 0.006 75); --fg-2: oklch(0.42 0.01 78); --fg-3: oklch(0.55 0.01 78); --fg-inverse: oklch(0.965 0.004 85); --shadow-card: inset 0 1px 0 oklch(1 0 0 / 0.6), 0 8px 32px oklch(0 0 0 / 0.08); --overlay-nav: oklch(0.975 0.004 85 / 0.72); } :root { --font-sans: "General Sans", -apple-system, "Segoe UI", sans-serif; --font-mono: "Spline Sans Mono", "SF Mono", monospace; /* Display */ --text-display-xl: 600 88px/0.98 var(--font-sans); --text-display: 600 64px/1.02 var(--font-sans); --tracking-display: -0.03em; /* Headings */ --text-title-1: 600 44px/1.08 var(--font-sans); --text-title-2: 600 32px/1.15 var(--font-sans); --text-title-3: 600 24px/1.25 var(--font-sans); --tracking-title: -0.02em; /* Body */ --text-body-lg: 400 19px/1.55 var(--font-sans); --text-body-md: 400 16px/1.55 var(--font-sans); --text-caption: 400 13px/1.45 var(--font-sans); /* Mono label (eyebrows, spec values) */ --text-label: 500 12px/1.4 var(--font-mono); --tracking-label: 0.14em; } :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --container: 1200px; --container-narrow: 760px; --gutter: 24px; } :root { --radius-pill: 999px; /* buttons, badges, nav */ --radius-card: 12px; /* cards, media */ --radius-control: 10px; /* inputs, selects */ --shadow-card: inset 0 1px 0 oklch(1 0 0 / 0.05), 0 8px 32px oklch(0 0 0 / 0.35); --hairline: inset 0 0 0 1px var(--border-card); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 160ms; /* hovers, presses */ --dur-med: 480ms; /* reveals, fades */ --blur-nav: saturate(1.4) blur(20px); --overlay-nav: oklch(0.145 0.006 75 / 0.72); } body { margin: 0; background: var(--surface-page); color: var(--text-body); font: var(--text-body-md); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--text-body); text-decoration: none; transition: opacity var(--dur-fast) var(--ease-out); } a:hover { opacity: 0.65; } ::selection { background: oklch(0.965 0.004 85 / 0.18); }