/* Pickclip — design tokens. THE definition of the shared palette, type scale, and section accent arc. Every page links this in its BEFORE its own styles; page-specific rules stay in the page (or in blog/blog.css). No build step — it's one more . Until 2026-08-18 this block was copy-pasted into seven places (index.html, blog/blog.css, voice/, gallery/, license/, license/success/, a/) and had already started to drift. Add a shared token HERE, never in a page. */ :root { /* ---------- paper & ink ---------- */ --paper: #faf6ee; --paper-deep: #f3ecdd; --ink: #1c1914; --ink-soft: #57503f; --line: #e3dac4; /* ---------- the highlighter ---------- The product argument — picking the one thing that matters — not decoration. It is never generated from the accent arc below. */ --mark: #ffd84d; --mark-soft: #ffe89a; /* ---------- signals ---------- */ --blue: #2757d6; /* interactive */ --green: #2e7d4f; --rec: #e0526f; /* the dictation record dot — deliberately OUTSIDE the accent arc: it's a UI signal shared with /voice/, not a section color. */ --radius: 14px; --mono: "IBM Plex Mono", ui-monospace, monospace; --serif: "Newsreader", georgia, serif; --display: "Fraunces", georgia, serif; /* ---------- the section accent arc ---------- Ten accents, one system: every one is oklch(0.73 0.115 h) — identical lightness and identical chroma, so only HUE changes. The hue steps by exactly 360°/9 = 40° per section, always in the same direction, so the arc walks the whole spectrum once on the way down the page and lands back on amber at the bottom. That is why the hero and the pricing section share a color: they are the arc's start and its return — amber is the paper's own hue at full saturation, so it reads as home — and not an oversight. Chroma is capped by sRGB, not by taste. Teal (#4, hue 201) has by far the smallest gamut of the nine hues; 0.115 is the most chroma every hue can hold at a lightness the --accent-ink derivation below can still reach 4.5:1 from. Push either one further and teal falls out of sRGB or the kickers stop passing AA. # section value accent text (--accent-ink) 1 hero oklch(.73 .115 81) #cca04b #7c6335 amber 2 features oklch(.73 .115 121) #9cb35d #636d3d moss 3 voice oklch(.73 .115 161) #5cbe91 #447358 jade 4 custom oklch(.73 .115 201) #2ebdc6 #337374 teal 5 history oklch(.73 .115 241) #5fb0e9 #456c88 sky 6 ai-tools oklch(.73 .115 281) #9b9fee #62638a periwinkle 7 phone oklch(.73 .115 321) #c98fd3 #7a5a7c orchid 8 who oklch(.73 .115 1) #e388a3 #885762 rose 9 testimonials oklch(.73 .115 41) #e58e6e #895a46 terracotta 10 license oklch(.73 .115 81) #cca04b #7c6335 amber, returned oklch() floor: Safari 15.4, Chrome 111, Firefox 113 — older than the color-mix() index.html and blog.css already depend on, so it costs no reach. Hues carry one decimal because the arc starts on the exact hue of the original amber #e0a51e (81.4°). */ --accent-1: oklch(0.73 0.115 81.4); --accent-2: oklch(0.73 0.115 121.4); --accent-3: oklch(0.73 0.115 161.4); --accent-4: oklch(0.73 0.115 201.4); --accent-5: oklch(0.73 0.115 241.4); --accent-6: oklch(0.73 0.115 281.4); --accent-7: oklch(0.73 0.115 321.4); --accent-8: oklch(0.73 0.115 1.4); --accent-9: oklch(0.73 0.115 41.4); --accent-10: oklch(0.73 0.115 81.4); } /* The text weight of whatever accent is in scope: the same hue driven into the ink until small text clears 4.5:1 on its own wash. Measured in Chrome on the rendered page, the worst pair is teal at 4.86:1 and the best is orchid at 5.32:1. Because it is mixed in oklab from a ramp with uniform lightness, all ten inks land on exactly one lightness (oklab L 0.5137) and within 7% of one chroma — a section kicker never reads heavier or lighter than the one above it. Anything that is TEXT, a rule, or a focus ring uses this; the arc value itself is for grounds, chips, glows and washes. This is also why the arc sits where it does. The pre-2026-08-18 accents were picked for brightness and every one of them failed AA as a section kicker on paper (2.04:1 amber … 4.89:1 violet); the governed arc plus this derivation is what makes ten differently-hued kickers all pass. Declared on * so it re-derives from the --accent each element inherits; there is no other way to keep a derived token in step with a value that changes per section. Falls back to plain ink where no accent is in scope. */ * { --accent-ink: color-mix(in oklab, var(--accent, var(--ink)) 58%, var(--ink)); }