/* tokens.css — design tokens. The ONLY file that declares raw colours (FE-8.1). Light theme on :root, dark theme via prefers-color-scheme overriding the same tokens — mechanics unchanged. The VALUES are the "porcelain" identity of 13 §0 (D19): cobalt ink on glazed white, one lacquer-red accent, brass for ratings. Every foreground/background pair below is validated at or above the FE-13.3 AA floor by `node frontend/tools/check-contrast.mjs`; where a supplied colour missed the floor its LIGHTNESS was walked (never its hue) until it cleared — those are the values annotated "lightness-adjusted from …". */ /* ---------- self-hosted type (CM-0.3) ---------- Archivo (variable, 100–900) + IBM Plex Mono 400/600, latin subsets, SIL OFL 1.1. Licences and provenance: /fonts/LICENCE.txt. 65 KB total, under the 120 KB cap. The two primary files (Archivo variable, Plex Mono 400) are ed from every page's . */ @font-face { font-family: "Archivo"; src: url("/fonts/archivo-latin-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light dark; /* spacing (FE-8.1) — 4, 8, 12, 16, 24, 32, 48, 64 px */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; /* type scale */ --tx--1: 0.875rem; --tx-0: 1rem; --tx-1: 1.2rem; --tx-2: 1.44rem; --tx-3: 1.73rem; --tx-4: 2.07rem; /* type roles (CM-0.3). Archivo is display AND body; the mono is reserved for eyebrows, numerals, timers, quantities and metadata — never form labels or controls (the restraint rule). */ --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --tracking-display: -0.025em; --tracking-mono: 0.16em; --weight-heading: 650; /* ---------- porcelain palette, light (CM-0.1) ---------- */ --porcelain: #eff2ee; /* page ground */ --glaze: #ffffff; /* card surfaces */ --cobalt: #16345e; /* primary ink: headings, structure, primary buttons */ --cobalt-mid: #2e5a96; /* interactive: links, focus, secondary actions */ --cobalt-pale: #cbd9e7; /* fills, selected rows, chips */ --ink: #10151b; /* body text */ --ink-soft: #545e69; /* secondary text — lightness-adjusted from #5A646E so it also clears 4.5:1 on --cobalt-pale fills */ --lacquer: #bf3b2c; /* THE accent: running/finished timers, destructive, unread dot, expiring soon */ --brass: #7d6534; /* secondary accent: star ratings, "shipped" — lightness- adjusted from #A98A45 (2.87:1 on porcelain) to clear 4.5:1 as a text/glyph colour; hue and saturation untouched */ --rule: rgba(22, 52, 94, 0.16); /* hairlines — elevation is rule + ground contrast */ /* ---------- semantic aliases (what the stylesheets actually reference) ---------- */ --bg: var(--porcelain); --surface: var(--glaze); --text: var(--ink); --muted: var(--ink-soft); --border: var(--rule); --accent: var(--cobalt); --accent-ink: #ffffff; --link: var(--cobalt-mid); --focus: var(--cobalt-mid); --danger: var(--lacquer); --danger-ink: #ffffff; /* Owner ruling (FE-8.1, amended): light --warn is #8a5e00 — it reads as dark brass beside the lacquer and still clears AA on every ground. */ --warn: #8a5e00; /* No green enters the scheme (CM-0.1): success is cobalt-mid PLUS a tick glyph, so colour is never the only channel. */ --ok: var(--cobalt-mid); /* misc (CM-0.4: 2 px radii everywhere, print-like; rules instead of shadows) */ --radius: 2px; --radius-pill: 2px; --shadow-1: none; /* Overlays float over live text, so they keep one whisper of a shadow on top of their hairline — the only elevation in the system. */ --shadow-pop: 0 6px 18px rgba(16, 21, 27, 0.12); /* dialog backdrop — an ink wash, not black, so a modal still sits in the scheme */ --scrim: rgba(13, 20, 32, 0.55); --maxw: 1100px; --tap: 44px; --nav-h: 56px; --motion: 150ms; /* CM-0.5 */ /* derived surfaces (tinted from the palette above, never new hues). Each has a static fallback first for engines without color-mix(); the MIX is what every current engine paints, and check-contrast.mjs now evaluates it (BUG-50 — it used to grade the fallback, which nothing paints). */ --surface-2: #f1f4f0; --surface-2: color-mix(in srgb, var(--glaze) 55%, var(--porcelain)); --accent-soft: #cbd9e7; --accent-soft: var(--cobalt-pale); --danger-soft: #f9e7e4; --danger-soft: color-mix(in srgb, var(--lacquer) 11%, var(--glaze)); --warn-soft: #f2e9d8; --warn-soft: color-mix(in srgb, var(--warn) 13%, var(--glaze)); --ok-soft: #dde8f4; --ok-soft: color-mix(in srgb, var(--cobalt-mid) 14%, var(--glaze)); /* expiry badges (FE-8.1 mechanics: three levels, most urgent filled). CM-0.1 gives "expiring soon" to the lacquer; the third level stays dark brass so the gradation survives, and every badge also carries a text label. */ --expiry-expired-bg: var(--danger-soft); --expiry-expired-ink: var(--danger); --expiry-soon-bg: transparent; --expiry-soon-ink: var(--danger); --expiry-near-bg: transparent; --expiry-near-ink: var(--warn); } @media (prefers-color-scheme: dark) { :root { /* ---------- "tenmoku" (CM-0.2) — derived; the cards are light-only ---------- */ --porcelain: #0d1420; --glaze: #152030; --cobalt: #8fb0de; /* structural cobalt, lightened */ --cobalt-mid: #7fa8dc; /* interactive */ --cobalt-pale: #243a5a; /* fills */ --ink: #e8ecf1; --ink-soft: #9aa7b5; --lacquer: #e06a57; --brass: #c7a55f; --rule: rgba(143, 176, 222, 0.18); --accent-ink: #0d1420; --danger-ink: #10151b; --warn: #ffc86b; --shadow-1: none; --shadow-pop: 0 6px 18px rgba(0, 0, 0, 0.5); --scrim: rgba(0, 0, 0, 0.66); --surface-2: #101a28; --surface-2: color-mix(in srgb, var(--glaze) 72%, var(--porcelain)); --accent-soft: #243a5a; --accent-soft: var(--cobalt-pale); /* CM-0.2, as PAINTED (BUG-50). Mixing the lacquer into --glaze walks the fill towards the accent: the ceiling is 4.97:1 on undiluted --glaze and 22% gave 3.71:1, so no percentage of --glaze clears the floor. Mixed towards the darker ground instead — hue untouched, per CM-0.2. */ --danger-soft: #2b2028; /* validated: --danger 4.75:1, --text 13.21:1 */ --danger-soft: color-mix(in srgb, var(--lacquer) 14%, var(--porcelain)); --warn-soft: #33291a; --warn-soft: color-mix(in srgb, var(--warn) 20%, var(--glaze)); /* 22% gave 4.42:1 as painted; --ok starts further from its ground, so this one is rescuable by percentage. 21% = 4.50:1, 18% takes the headroom. */ --ok-soft: #28384f; /* validated: --ok 4.83:1, --text 10.01:1 */ --ok-soft: color-mix(in srgb, var(--cobalt-mid) 18%, var(--glaze)); } }