/* ─────────────────────────────────────────────────────────────────────────────
tokens.css — one set of values for the whole app.
The app's property NAMES do not change: they are referenced 133, 95, 68, 60,
48 and 44 times (--muted, --border, --accent, --text, --radius, --surface),
and every one of those references is in a page's own CSS or markup. Pointing
the names at the marketing site's palette re-skins all 17 pages without
editing a line of page JavaScript — which is the whole of phase 1, and why it
reverts by deleting one file.
Measured by tools/audit_style_tokens.py; the map and the reasoning are in
docs/ui-token-alias-audit.md.
Two things this file must carry that are easy to lose:
· THE FONT. Both stylesheets set font-family inside the same :root block
as the tokens, and nothing else sets the page font. Moving the tokens
out without it loses Inter everywhere.
· ALL 39 NAMES. The app reads 39; a shorter set leaves 34 references
undefined, 30 of them with no fallback.
Loaded by a in every page that loads style.css or shell.css, before
them, because no one sheet reaches every page: three pages load shell.css
only, four load style.css only. (mcp-doc.html loads neither and has its own
private palette.) It is a and not an @import: an @import is found
only after the importing sheet has been fetched and parsed, which serialises
a request on every page load.
──────────────────────────────────────────────────────────────────────────── */
:root {
/* ── The marketing site's palette (www/src/styles/tokens.css) ───────────── */
--orange: #ff3e00;
--orange-hot: #ff5a26;
--orange-ink: #c22f00; /* the readable orange: 5.4:1 on --card */
--ok: #276b43;
--paper: #f0ede7; /* warm off-white */
--paper-2: #e8e4dc;
--card: #fbf9f6;
--ink: #12110f;
--ink-60: #57534c;
--ink-40: #86817a; /* 3.3:1 on paper — decoration and disabled only */
--rule: #d6d1c7;
--rule-strong: #b8b2a6;
/* ── The app's own names, pointed at them ───────────────────────────────── */
--accent: var(--orange);
--accent-hover: var(--orange-hot);
/* Was a 12% orange tint. Opaque, because a tint over a warm paper reads as a
different hue depending on what is behind it. */
--accent-dim: var(--paper-2);
--border-focus: var(--orange);
/* White text on --orange is 3.53:1, under the 4.5:1 a 12-13px label needs. A FILL that
carries white text (a primary button, a count pill) uses this instead: 4.71:1, and the
hover goes darker, not lighter, so the state somebody sees while clicking keeps its
contrast. --accent itself is unchanged: it is a mark, a ring and a current-page rule,
none of which is text. */
--accent-fill: #d93500;
--accent-fill-hover: #c42f00;
--bg: var(--paper);
--surface: var(--card);
--surface-2: var(--paper-2);
--border: var(--rule);
--text: var(--ink);
--muted: var(--ink-60);
--success: var(--ok);
--ok-fg: var(--ok);
/* Red becomes burnt orange: this product has one warm accent, and a second
red hue beside it reads as a different brand rather than a louder warning. */
--danger: var(--orange-ink);
--danger-fg: var(--orange-ink);
--warn-fg: var(--orange-ink);
--warn-line: var(--orange);
/* HTTP verbs were five hues doing a job the word already does. One neutral,
and delete keeps the warm one because it is the only destructive verb.
This also fixes them: they were 3.30:1 and 3.56:1, now 7.64:1. */
--method-get: var(--ink-60);
--method-post: var(--ink-60);
--method-put: var(--ink-60);
--method-patch: var(--ink-60);
--method-delete: var(--orange-ink);
/* Six pastel chip hues carried no meaning the label did not already carry,
and each was its own contrast problem. One neutral chip. */
--chip-blue-bg: var(--rule); --chip-blue-fg: var(--ink);
--chip-violet-bg: var(--rule); --chip-violet-fg: var(--ink);
--chip-amber-bg: var(--rule); --chip-amber-fg: var(--ink);
--chip-red-bg: var(--rule); --chip-red-fg: var(--ink);
--chip-green-bg: var(--rule); --chip-green-fg: var(--ink);
--chip-indigo-bg: var(--rule); --chip-indigo-fg: var(--ink);
/* Referenced once, in checkup.html, and declared nowhere before now. It had
a fallback, so it worked by accident. */
--danger-dim: var(--paper-2);
/* ── Shape and motion ───────────────────────────────────────────────────── */
--radius: 3px; /* was 6px */
--radius-lg: 4px; /* was 10px */
--sidebar-width: 280px; /* unchanged: layout, not skin */
--transition: 0.18s ease;
/* One size for each thing that was a different size on different pages (shell.css reads
them). The page gutter is the one left edge the title and the content share. Heights
are the ones the busiest pages already had, so nothing grows. */
--gutter: 24px;
--control-h: 39px; /* .btn */
--control-h-sm: 31px; /* .btn--sm */
--badge-h: 20px; /* .badge */
--nav-item-h: 33px; /* a link in the rail */
/* Near-square corners and a warm paper do not want drop shadows; a rule
carries the same separation without the haze. Both names are kept because
eight rules reference them. */
--shadow-sm: none;
--shadow-md: none;
/* ── Type ───────────────────────────────────────────────────────────────── */
--font: "Inter", system-ui, -apple-system, sans-serif;
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* The page font. It lived in the :root block the tokens came out of, and
nothing else sets it. */
font-family: var(--font);
color-scheme: light;
}
/* ─────────────────────────────────────────────────────────────────────────────
Fields are styled because they are fields.
Every rule for an input was written against a class — `.input`, `.field
input` — so a bare fell back to the browser's own control: a square
grey box in the browser's font, beside everything else in Inter on warm
paper. 74 of them across 13 files, and the count only goes up, because
nothing fails when somebody forgets the wrapper.
So the element carries the style and the class is no longer load-bearing.
The selector list is wrapped in :where(), which has specificity zero: it
still beats the browser's own defaults (author rules beat the user-agent
sheet whatever their specificity), but ANY other rule beats it, a class
(`.pp-input`, `.mfa-code`), `.field input[type=...]`, or an attribute state.
Written bare, the six :not([type=...]) clauses made it (0,6,1), which beat
every one of those classes. tests/test_tokens_css.py computes it.
Lives in tokens.css because it is the same argument as the tokens: one
answer in one place, reaching every page that loads a stylesheet.
───────────────────────────────────────────────────────────────────────── */
:where(
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
select,
textarea
) {
font: inherit;
font-size: 13px;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 7px 9px;
max-width: 100%;
}
textarea { line-height: 1.55; resize: vertical; }
/* A select is a control you open, so it keeps the browser's arrow and the
padding that leaves room for it. */
select { padding-right: 6px; }
input::placeholder,
textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 1px;
border-color: var(--border-focus);
}
input:disabled,
select:disabled,
textarea:disabled {
background: var(--surface-2);
color: var(--muted);
cursor: not-allowed;
}
/* A field the page has marked wrong. Not colour alone: the page says why
beside it, and this is the mark that points at which one. */
input[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--danger); }
/* The one control that must not be touched: a file input's button is drawn by
the browser and padding it leaves the text sitting outside the box. */
input[type="file"] { font: inherit; font-size: 13px; color: var(--text); }
/* Checkboxes and radios take the accent and nothing else — sizing them breaks
the alignment every .choice-item already has. */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--accent); }