/* ═══════════════════════════════════════════════════════════════════════════ agentic.adam · tokens Gate 4, 19 sep 2026. THIS IS THE ONLY FILE IN THIS PROJECT THAT CONTAINS A HEX. index.html, styles.css and app.js read tokens and nothing else. If you find a colour or a raw size anywhere but here, it is a bug. It loads AFTER Office/library/UI-Library/kit/matier-ui.css and does two jobs: 1 · RETOKENISE THE KIT. The kit is imported, never forked. It exposes eleven palette names and four family names. Changing those values is the whole supported way to reskin it, and it is what THE KIT LAW means by "a project changes six tokens and nothing else". No kit rule is redefined below. Verified off the kit's own rules before mapping: --u-paper is the CARD (.u-card{background:var(--u-paper)}) --u-cream is the GROUND (.u-tile, .u-band) --u-sand is a TRACK (.u-segbar, .u-prog__track) Getting those backwards is the white-on-white bug the kit warns about. 2 · DECLARE THE PROJECT TIERS, per references/07-stack.md: tier 1 raw primitives that are never used directly, tier 2 semantic names that carry meaning, tier 3 component knobs. Every token has a value on bare :root. The contract these serve is 00_BRIEF/DESIGN.md, amended once at gate 1 off live measurement of rauno.me, emilkowal.ski and paco.me. ═══════════════════════════════════════════════════════════════════════════ */ :root{ color-scheme: light; /* ── TIER 1 · primitives. Raw values. Never referenced by a page file. ──── */ --paper-0:#FFFFFF; /* the card. white, always */ --paper-1:#F6F3F0; /* the ground. warm, and the warmth is the whole tension with the signal */ --paper-2:#EFEAE5; /* one step down. tracks, rails, a nested well */ --ink-900:#15120F; /* warm near black. never #000, measured on all three references */ --ink-600:#6B6259; --ink-400:#877D74; /* meta only. Measured 2.83:1 at #9A9086, under the 3:1 floor AUDIENCE.md sets for meta. Darkened until it cleared it. Still fails AA for BODY by design: it is never body. */ --signal-600:#1B44C8; /* the one accent. cool, against a warm ground */ --signal-800:#12309A; --signal-050:#E9EDFB; /* ── TIER 2 · semantic. This is the tier that carries meaning. ─────────── */ --color-bg:var(--paper-1); --color-surface:var(--paper-0); --color-well:var(--paper-2); --color-text:var(--ink-900); --color-text-muted:var(--ink-600); --color-text-meta:var(--ink-400); --color-accent:var(--signal-600); --color-accent-deep:var(--signal-800); --color-accent-wash:var(--signal-050); --color-hairline:rgba(21,18,15,.10); --color-hairline-2:rgba(21,18,15,.06); /* The inverted band. A material, not a theme: it is punctuation, roughly one section in three, never two in a row. DESIGN.md. */ --color-invert-bg:var(--ink-900); --color-invert-text:var(--paper-1); --color-invert-meta:rgba(246,243,240,.55); --color-invert-hair:rgba(246,243,240,.14); --color-invert-well:#1F1A16; /* a surface INSIDE the dark band. The dark is a material, so it needs a second step or every object inside it disappears into the ground. */ /* ── TYPE ──────────────────────────────────────────────────────────────── Two families. That is a performance budget, not a preference: the traffic is almost entirely phone, off Instagram, and INP is the most failed vital. Self hosted in fonts/fonts.css, so the page makes no third party request. */ --font-ui:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* One fluid scale, hand set, 1.25 minimum ratio. A smaller jump reads as an accident. step-0 is locked across breakpoints: only headings scale. Ruling 5 in 16-rulings.md. */ --step--1:clamp(.8125rem,.79rem + .1vw,.875rem); --step-0: 1rem; --step-1: clamp(1.25rem,1.19rem + .28vw,1.375rem); --step-2: clamp(1.5rem,1.36rem + .7vw,1.9rem); --step-3: clamp(1.9rem,1.62rem + 1.4vw,2.6rem); --step-4: clamp(2.4rem,1.9rem + 2.4vw,3.6rem); --step-5: clamp(2.9rem,2.1rem + 3.9vw,5rem); --leading-body:1.65; /* measured 1.65 to 1.75 across the three references */ --leading-tight:1.12; --leading-display:1.02; --track-display:-.035em; /* large type needs negative tracking */ --track-heading:-.02em; --track-eyebrow:.14em; /* positive tracking only when small */ /* ── SPACE · one scale, no arbitrary values ─────────────────────────────── */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:72px; --space-9:112px; /* ── SHAPE · radius scales with surface, a child never exceeds its parent ─ */ --radius-xs:7px; --radius-s:12px; --radius-m:18px; --radius-l:24px; --radius-pill:999px; /* ── DEPTH · hairlines, not shadows. Ruling 4: hairline for a surface that sits, shadow for one that floats, never both. Nothing above .06 alpha. */ --elev-0:none; --elev-1:0 1px 2px rgba(21,18,15,.04); --elev-2:0 1px 2px rgba(21,18,15,.035), 0 10px 26px -14px rgba(21,18,15,.10); /* ── MOTION · two curves, never a third ────────────────────────────────── Ruling 1: cubic-bezier here, not springs. Nothing on this page is grabbed by a finger, and springs are for what a finger drags. */ --ease-out:cubic-bezier(.22,1,.36,1); /* entrances */ --ease-io:cubic-bezier(.4,0,.2,1); /* hover, focus, state */ --dur-fast:150ms; /* measured: the three references all sit 150 to 240ms */ --dur-base:320ms; --dur-reveal:600ms; --stagger:120ms; /* measured off paco.me, shipped. DESIGN.md said 40 to 80 and was wrong */ /* ── MEASURE ───────────────────────────────────────────────────────────── 64ch. Measured at 64.0, 64.2 and 66.1 on the three references. */ --measure:64ch; --measure-display:22ch; /* a six line heading kills the impact */ --wrap:1080px; --wrap-wide:1320px; /* ── TIER 3 · component knobs. Only where a component needs its own. ────── */ --card-bg:var(--color-surface); --card-border:var(--color-hairline); --card-radius:var(--radius-m); --button-primary-bg:var(--color-text); --button-primary-text:var(--color-bg); --chip-bg:var(--color-accent-wash); --chip-text:var(--color-accent-deep); --term-bg:var(--color-invert-bg); --term-text:var(--color-invert-text); } /* ═══ THE KIT, RETOKENISED ═══════════════════════════════════════════════════ Eleven palette names and four family names. Nothing else. No kit rule is redefined, no kit class is overridden. The kit's own derived tier picks the rest up automatically, because --u-hair and --u-hair-2 are color-mix off --u-ink and --u-up / --u-down are aliases of --u-grass / --u-clay. */ :root, .theme-agentic{ --u-paper:var(--color-surface); /* .u-card, the elevated white */ --u-cream:var(--color-bg); /* .u-tile and .u-band, the ground */ --u-sand:var(--color-well); /* tracks and rails */ --u-ink:var(--color-text); --u-ink-soft:var(--color-text-muted); --u-ink-faint:var(--color-text-meta); --u-grass:var(--color-accent); /* the kit calls its accent grass. Ours is cobalt */ --u-grass-deep:var(--color-accent-deep); --u-grass-tint:var(--color-accent-wash); /* The kit keeps a second data voice in --u-ochre and a bad state in --u-clay. DESIGN.md forbids a second accent outright: "states borrow the accent rather than adding hues, and there is no red and no green on this page." So both resolve to ink tones. A second data series reads as grey, and a refused action reads as gone quiet rather than as an error. */ --u-ochre:var(--color-text-muted); --u-clay:var(--color-text-muted); --u-display:var(--font-ui); --u-text:var(--font-ui); --u-ui:var(--font-ui); --u-mono:var(--font-mono); --u-measure:var(--measure); /* Geometry, aligned to our scale so a kit component and a page component cannot disagree about a corner. */ --u-r-xl:var(--radius-l); --u-r-card:var(--radius-m); --u-r-tile:var(--radius-s); --u-r-s:var(--radius-s); --u-r-xs:var(--radius-xs); --u-ease:var(--ease-io); --u-ease-out:var(--ease-out); --u-dur:var(--dur-fast); --u-sh-1:var(--elev-1); --u-sh-2:var(--elev-2); } /* The denied copy state on a dark ground. --u-clay is an ink tone by the rule above, which is invisible inside .u-term, so it is restated in the terminal's own key. This is a legibility fix, not a second colour. */ .u-term .u-copy[data-copied="denied"]{ border-color:var(--color-invert-meta); color:var(--color-invert-meta); }