/* Arklive design tokens. Ledger paper: pale rule lines, deep teal for anything held, copper for anything to watch, brick for anything wrong. Every tool imports this first. Don't redefine these locally — extend them. */ /* ── LIGHT AND DARK ─────────────────────────────────────────────────── Each token is declared twice: a flat light value, then the same token as light-dark(). A browser without light-dark() keeps the first and renders the light theme; everything current takes the second and follows the reader. There is one declaration per token either way, so the two themes cannot drift apart the way parallel blocks do. Which theme applies: no attribute follow the operating system data-theme="light" force light data-theme="dark" force dark shared/lib/theme.js sets the attribute and remembers the choice. color-scheme carries it into form controls and scrollbars too. The dark signal colours are NOT the light ones dimmed — they are lifted, because they now sit on a dark ground and have to clear AA against it rather than against paper. Verified figures are below. ─────────────────────────────────────────────────────────────────── */ :root{ color-scheme: light dark; /* surface */ --paper: #F1F3EE; --paper: light-dark(#F1F3EE, #0E1614); --paper-alt: #E7EBE5; --paper-alt: light-dark(#E7EBE5, #16211E); --paper-card: #FFFFFF; --paper-card: light-dark(#FFFFFF, #131E1B); --rule: #C1CFC9; --rule: light-dark(#C1CFC9, #2C3B36); /* ink */ --ink: #14211D; --ink: light-dark(#14211D, #E9EEEA); --ink-soft: #55675F; --ink-soft: light-dark(#55675F, #9BAEA7); /* hover state of an ink surface — darker in light, dimmer in dark, because an ink surface is a light chip once the theme flips */ --ink-lift: #24352E; --ink-lift: light-dark(#24352E, #CBD5D0); /* semantic — these carry meaning, not decoration. seal = locked, healthy, constrained amber = watch it flag = free to move, thin, broken, wrong Measured against every surface these sit on — paper, card and paper-alt. Worst case of the three, all clearing WCAG AA (4.5:1) for body text: light seal 8.1 · amber 4.6 · flag 5.9 · ink 13.8 · ink-soft 5.0 dark seal 7.8 · amber 7.8 · flag 5.7 · ink 14.1 · ink-soft 7.1 Amber is the tight one in light: it was drawn a shade deeper than a display copper so it still passes on paper-alt. Lighten it and it fails. */ --seal: #0F4C4A; --seal: light-dark(#0F4C4A, #56C3B6); --amber: #945B0A; --amber: light-dark(#945B0A, #E0A94A); --flag: #A32C1C; --flag: light-dark(#A32C1C, #F0705C); /* type */ --font-display: "IBM Plex Sans Condensed", system-ui, sans-serif; --font-body: "IBM Plex Serif", Georgia, serif; --font-data: "IBM Plex Mono", ui-monospace, monospace; /* scale */ --pad: clamp(16px, 3vw, 34px); --gap: 14px; --rule-w: 1px; } /* These two rules are what makes data-theme mean anything. light-dark() reads the used color-scheme, so narrowing the scheme to one option is what forces a theme — setting the attribute alone changes nothing. */ :root[data-theme="light"]{ color-scheme: only light } :root[data-theme="dark"] { color-scheme: only dark } /* ── ROLLBACK ────────────────────────────────────────────────────────── Everything replaced in the refresh is kept below, inert, behind an attribute. To restore the original look, add the attribute to the tag of any page — nothing else needs touching: original navy / oxblood pre-bento mobile stacking Both may be set at once, and both compose with data-theme. Remove the attribute to return to current. The layout rollback lives with the layout rules it undoes: in this file at the foot, and in each tool's