:root { /* TWO SOURCES feed this file. Each group below names its own. Do not mix them, and do not assume a rule that binds one binds the other. DESIGN SYSTEM — the first two groups, mirrored from the token block carried identically by 17 mockups in docs/design/. Those VALUES are character-exact and must stay so: each literal matches the source glyph for glyph, including trailing zeros (0.150, not 0.15) and single-quoted font names. A divergent value there is a defect, not a local choice. BRAND-DERIVED — the third group, taken from the brand assets in docs/design/. Those are a legitimate second source of truth and sit OUTSIDE the mirror rule above; they are not expected to match the design system and must never overwrite a design-system token. See that group's own comment for why they differ. WHITESPACE is not the source's. Values align at column 19 here and at column 22 there, inherited from this repo's original holding page. That is deliberate and should not be "corrected" to match. It does mean a literal line diff reports every line as differing on padding alone — so compare at the value level, never the line level. The .prettierignore entry exists to protect the value literals, not the layout: Prettier normalises number formatting (0.150 -> 0.15) and quote style, which is semantically inert but destroys value-level comparison. Do not remove that entry to "fix" an unformatted file. The design system splits these across two selectors: theme-varying tokens under :root[data-theme="dark"], theme-invariant ones under base :root. Both are flattened into the plain :root below, because this site is dark-only and must not lose its styling if the data-theme attribute goes missing. src/index.html keeps data-theme="dark" on ; no selector here consumes it — inert, but intentional. The group comments record each token's source selector so the flattening is reversible if a light theme ever lands. */ /* Source: :root[data-theme="dark"] — theme-varying */ --accent: oklch(0.705 0.150 49); --accent-hover: oklch(0.755 0.150 50); --accent-soft: oklch(0.320 0.055 46); --on-accent: oklch(0.180 0.020 55); --paper: oklch(0.196 0.006 60); --surface: oklch(0.236 0.007 60); --text: oklch(0.935 0.005 75); --text-muted: oklch(0.720 0.009 66); --text-subtle: oklch(0.585 0.010 64); --text-on-soft: oklch(0.880 0.060 60); --border: oklch(0.330 0.009 62); --border-faint: oklch(0.285 0.008 60); /* Source: :root (base) — theme-invariant */ --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Source: docs/design/stream-lockup-on-dark.svg — brand-derived. Outside the mirror rule: these come from the brand assets, not the design system, and are deliberately NOT equal to --text / --text-muted. On dark they sit brighter (0.960 vs 0.935; 0.760 vs 0.720) — optical compensation applied by CD, confirmed deliberate because the light-variant assets match light --text and --accent exactly while the dark ones do not. Never substitute --text or --text-muted for these, and never overwrite a design-system token with them. The lockup's dot needs no token here: its fill is exactly --accent. */ --brand-mark: oklch(0.960 0.004 75); --brand-wordmark: oklch(0.760 0.009 68); color-scheme: dark; }