*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* ── THEME TOKENS ────────────────────────────────────────────────────── The palette is expressed through two RGB *triplets* — --fg-rgb (the foreground: text, icons, hairlines) and --bg-rgb (the page background) — so every `rgba(var(--fg-rgb), α)` value inverts automatically when the theme flips. Only these few lines differ between dark and light; the light values live in the `[data-theme="light"]` block just below. --ink is the page background, --paper the primary text colour. */ --fg-rgb: 245,242,235; /* paper — light foreground on dark */ --bg-rgb: 14,14,13; /* ink — dark page background */ --ink: rgb(var(--bg-rgb)); --ink-2: #16161480; --paper: rgb(var(--fg-rgb)); --green: #2a6e3f; --green-mid: #4a9e65; --amber: #c8812a; --red: #c0392b; --blue: #5b9bd5; --muted: rgba(var(--fg-rgb),.35); --border: rgba(var(--fg-rgb),.1); --border-strong: rgba(var(--fg-rgb),.2); --surface: rgba(var(--fg-rgb),.03); --surface-hover: rgba(var(--fg-rgb),.06); /* Solid surfaces (can't be alpha layers — they sit over the page or need to be opaque): the sidebar, raised panels/dropdowns, and native