/* ========================================================================== Platform design tokens — the product's own dogfooded token file. Every color, size, and motion value in the app resolves to one of these. Colors are declared once as light-dark(light, dark). Which half applies is decided by `color-scheme`, so the whole theme switch is the two rules at the bottom of this block — there is no second copy of the palette to keep in sync. `color-scheme: light dark` means "follow the OS" until a [data-theme] on overrides it. ========================================================================== */ :root { color-scheme: light dark; /* color — brand */ --color-primary: #4ED391; /* green — CTAs, accents, selection */ --color-primary-strong: light-dark(#1C9E6F, #7EEFC0); --color-on-primary: #141310; /* text/icons on primary fills */ /* Green type on a cream background is unreadable (~1.8:1), so accent TEXT uses a darkened emerald while fills keep the bright green. In dark mode the bright green already passes (~9.8:1) and is used as-is. */ --color-primary-text: light-dark(#0F7A4E, #4ED391); /* color — surfaces */ --color-bg: light-dark(#FAF8F2, #141310); --color-surface: light-dark(#FFFFFF, #1D1B16); --color-surface-sunken: light-dark(#F1EEE4, #100F0C); --color-border: light-dark(rgba(20, 19, 16, 0.12), rgba(244, 241, 232, 0.12)); --color-border-strong: light-dark(rgba(20, 19, 16, 0.24), rgba(244, 241, 232, 0.24)); /* color — text */ --color-ink: light-dark(#141310, #F4F1E8); --color-muted: light-dark(#6E6857, #97917F); --color-faint: light-dark(#97917F, #6E6857); /* color — feedback */ --color-success: light-dark(#3E8E41, #7BC96F); --color-danger: light-dark(#D33438, #E5484D); --color-danger-soft: light-dark(rgba(211, 52, 56, 0.10), rgba(229, 72, 77, 0.14)); /* Feedback colours as TEXT, for the same reason --color-primary-text exists. Each mode lifts whichever half falls short at small sizes: success is the weak one on white (4.1:1), danger on the dark surface (4.4:1). The other half of each pair is already passing and unchanged. */ --color-success-text: light-dark(#37833B, #7BC96F); --color-danger-text: light-dark(#D33438, #E85358); /* color — syntax highlighting, read on --color-surface in both modes. Every value clears 4.5:1 against that background; the light-mode string green is the darkened emerald for the same reason --color-primary-text exists, since the bright brand green is unreadable as text here. */ --syntax-comment: light-dark(#6E6857, #97917F); --syntax-string: light-dark(#0F7A4E, #4ED391); --syntax-number: light-dark(#9A5300, #E8A860); --syntax-keyword: light-dark(#A03070, #F49AC8); --syntax-property: light-dark(#1F5FA8, #8FC4F5); --syntax-punctuation: light-dark(#7A7361, #8A8474); /* typography */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Space Grotesk', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 19px; --text-xl: 24px; --text-2xl: 34px; --text-display: clamp(40px, 5.5vw, 84px); --text-hero: clamp(80px, 15.5vw, 300px); --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; --leading-tight: 1.0; --leading-body: 1.6; --tracking-display: -0.03em; --tracking-caps: 0.18em; /* spacing (4px base) */ --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: 160px; /* radius — Platform is square by design */ --radius-none: 0; --radius-full: 9999px; /* window-chrome dots and the account avatar only */ /* shadow — dark surfaces need a denser shadow to read at all */ --shadow-sm: 0 1px 2px light-dark(rgba(20, 19, 16, 0.08), rgba(0, 0, 0, 0.4)); --shadow-lg: 0 8px 24px light-dark(rgba(20, 19, 16, 0.16), rgba(0, 0, 0, 0.5)); /* motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 150ms; --duration-slow: 400ms; } /* The entire theme switch. Absent [data-theme], `color-scheme: light dark` above leaves the choice to the OS. The inline script in each page's sets the attribute before first paint so a stored choice never flashes. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* -------------------------------------------------------------------------- Base, built entirely on the tokens above -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* An author-level `display` beats the UA stylesheet's [hidden] rule, which silently breaks toggling on any flex/grid element. Make [hidden] win. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; } a { color: var(--color-ink); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--color-primary); } ::selection { background: var(--color-primary); color: var(--color-on-primary); } code, pre, kbd { font-family: var(--font-mono); font-size: var(--text-sm); } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; } }