/* ════════════════════════════════════════════════════════════════════════════ Détente — theme tokens. Two independent axes, both set on : data-variant (press | vermillion | brass | letterpress) and data-mode (light | dark). Eight combinations, all valid. Every value here is a token; no component hard-codes a colour. The four variants differ on more than colour — radius, rule weight and the eyebrow treatment change too. That is what makes them read as four designs rather than four palettes. ════════════════════════════════════════════════════════════════════════════ */ :root{ /* PRESS — the canonical press sheet: cream ground, oxblood decides, hairline rules */ --bg:#F1E9D9; --raised:#E9DFCB; --fg:#14100E; --muted:#6B6058; --primary:#7A2E2E; --brass:#B08D57; --eyebrow:#6C5021; --btn-bg:#7A2E2E; --btn-fg:#F1E9D9; --outline:#C9BCA4; --hair:rgba(20,16,14,.12); --radius:4px; --border:1px; --rule:2px; --mk-s:#14100E; --mk-b:#B08D57; --mk-r:#7A2E2E; --eyebrow-bg:transparent; --eyebrow-pad:0; --eyebrow-rule:0 solid transparent; } :root[data-mode="dark"]{ --bg:#14100E; --raised:#1F1917; --fg:#F1E9D9; --muted:#8A8078; --primary:#C46A6A; --brass:#D3B183; --eyebrow:#D3B183; --btn-bg:#C46A6A; --btn-fg:#14100E; --outline:#3A312C; --hair:rgba(241,233,217,.10); --mk-s:#F1E9D9; --mk-b:#D3B183; --mk-r:#C46A6A; } :root[data-variant="vermillion"]{ /* VERMILLION — oxblood IS the ground; brass carries the actions, cream carries the type */ --bg:#5C2222; --raised:#6C2C2B; --fg:#F4EADA; --muted:#CBA9A2; --primary:#E2C295; --brass:#EBD3A8; --eyebrow:#EBD3A8; --btn-bg:#E2C295; --btn-fg:#3A1414; --outline:#87423F; --hair:rgba(244,234,218,.16); --radius:2px; --border:1px; --rule:2px; --mk-s:#F4EADA; --mk-b:#E2C295; --mk-r:#F4EADA; --eyebrow-bg:transparent; --eyebrow-pad:0; --eyebrow-rule:0 solid transparent; } :root[data-variant="vermillion"][data-mode="dark"]{ --bg:#2A0F0F; --raised:#3A1717; --fg:#F1E4D4; --muted:#B4938C; --primary:#DDB98A; --brass:#E8CDA1; --eyebrow:#E8CDA1; --btn-bg:#DDB98A; --btn-fg:#2A0F0F; --outline:#5A2422; --hair:rgba(241,228,212,.12); --mk-s:#F1E4D4; --mk-b:#DDB98A; --mk-r:#E8B9A8; } :root[data-variant="brass"]{ /* BRASS — brass takes the actions, oxblood drops back to a spark; squared corners, heavier rules */ --bg:#F7F1E3; --raised:#EFE5CD; --fg:#171310; --muted:#6A5E4E; --primary:#7F6026; --brass:#B08D57; --eyebrow:#7A2E2E; --btn-bg:#B08D57; --btn-fg:#14100E; --outline:#D6C4A2; --hair:rgba(23,19,16,.16); --radius:0px; --border:1px; --rule:3px; --mk-s:#171310; --mk-b:#B08D57; --mk-r:#7A2E2E; --eyebrow-bg:transparent; --eyebrow-pad:0 0 6px; --eyebrow-rule:2px solid var(--brass); } :root[data-variant="brass"][data-mode="dark"]{ --bg:#100D0B; --raised:#1B1713; --fg:#F3E9D6; --muted:#8C8073; --primary:#D3B183; --brass:#D3B183; --eyebrow:#C46A6A; --btn-bg:#D3B183; --btn-fg:#100D0B; --outline:#352C22; --hair:rgba(243,233,214,.12); --eyebrow-bg:transparent; --eyebrow-pad:0 0 6px; --eyebrow-rule:2px solid var(--brass); --mk-s:#F3E9D6; --mk-b:#D3B183; --mk-r:#C46A6A; } :root[data-variant="letterpress"]{ /* LETTERPRESS — ink and paper only. The mark is the one coloured thing on the page. */ --bg:#FAF7F0; --raised:#F2EDE2; --fg:#14100E; --muted:#5E574F; --primary:#14100E; --brass:#14100E; --eyebrow:#14100E; --eyebrow-fg:#FAF7F0; --btn-bg:#14100E; --btn-fg:#FAF7F0; --outline:#14100E; --hair:rgba(20,16,14,.85); --radius:0px; --border:1px; --rule:4px; --eyebrow-bg:#14100E; --eyebrow-pad:6px 10px; --eyebrow-rule:0 solid transparent; --mk-s:#14100E; --mk-b:#B08D57; --mk-r:#7A2E2E; } :root[data-variant="letterpress"][data-mode="dark"]{ --bg:#14100E; --raised:#1C1715; --fg:#F1E9D9; --muted:#9A9188; --primary:#F1E9D9; --brass:#F1E9D9; --eyebrow:#F1E9D9; --eyebrow-fg:#14100E; --btn-bg:#F1E9D9; --btn-fg:#14100E; --outline:#F1E9D9; --hair:rgba(241,233,217,.7); --eyebrow-bg:#F1E9D9; --eyebrow-pad:6px 10px; --eyebrow-rule:0 solid transparent; --mk-s:#F1E9D9; --mk-b:#D3B183; --mk-r:#C46A6A; } /* The mode drives color-scheme from CSS rather than from documentElement.style, so form controls and scrollbars follow the theme without the page depending on CSSOM writes being exempt from style-src. They are exempt; this is simply not a thing worth resting on when two rules say it outright. */ :root[data-mode="light"]{ color-scheme: light; } :root[data-mode="dark"] { color-scheme: dark; } /* Base */ html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: Geist, "Geist Sans", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; text-wrap: pretty; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--fg); } ::selection { background: var(--btn-bg); color: var(--btn-fg); }