/* Design tokens — OrchardRank, red on white.
*
* ONE PROBLEM WORTH NAMING, because getting it wrong is how red brands become unusable:
* red already meant "danger" in this interface. Making it also mean "the main action" puts the
* publish button and the delete button in the same colour, and a customer about to push work to
* a live site should never have to read carefully to tell those apart.
*
* So the two are separated by DEPTH rather than hue, and never rely on colour alone:
* --brand #e30721 bright, saturated → primary actions, links, active navigation
* --bad #7f1d1d dark, desaturated → destructive actions and errors, always with a word
* A destructive control is additionally outlined rather than filled, so the difference survives
* greyscale, projector washout, and the ~8% of men with red-green colour blindness (for whom
* red vs green is the failing pair — red vs dark-red still reads as light vs dark).
*
* Contrast, MEASURED in the browser rather than estimated: white on #e30721 is 4.86:1 and white
* on #7f1d1d is 10.02:1 — both clear WCAG AA for body text (4.5:1), not merely for large text.
*/
:root {
--space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem;
--radius: 12px;
--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--bg: #fbf9f9; /* white, warmed a half-step so the red never looks cold */
--surface: #ffffff;
--border: #ecdfe1; /* the border carries a trace of the brand instead of neutral grey */
--text: #1a1416;
--text-muted: #6b5c5f;
/* TWO reds, and the reason is measured, not aesthetic. The reference brand (City Bank,
* #F20823) is a vivid red that scores 4.34:1 against white — under the 4.5 WCAG asks for
* body text. City Bank themselves put DARK text on it, never white. Using it behind white
* button labels would make the most-clicked text on the site the least legible.
*
* So the vivid red keeps its job as the identity — big fills, the masthead rule, hero
* panels, large display type, where 4.34 is comfortably fine because the threshold for
* large text is 3.0. And a hair-darker sibling carries small white text: #E30721 is the
* closest shade to the reference that clears 4.5 (4.86:1). Side by side they read as the
* same colour; the difference exists only where legibility is at stake. */
--brand: #e30721; /* interactive: buttons, links, anything with small white text */
--brand-vivid: #f20823; /* identity: large fills, rules, display type — the reference red */
--accent: var(--brand);
--accent-soft: #fff1f2; /* the tint used for selected rows and quiet emphasis */
/* A THIRD red, and the reason is the same arithmetic as the first two. #e30721 clears 4.5
* against white, but the soft tint is not white — it is a pale pink, and on it the same red
* measures 4.43. That is a fail by seven hundredths, which is exactly the kind of miss nobody
* catches by eye: the count pills, the tags and the pillar chips all looked fine and all sat
* just under the line. A shade darker restores the margin (5.05) while reading as the same
* colour beside its siblings. */
--brand-on-tint: #d2061e;
--accent-contrast: #ffffff;
--ok: #15803d;
--bad: #7f1d1d; /* destructive — DARK red, never the brand red */
--warn: #b45309;
--shadow: 0 1px 2px rgba(90,20,30,.06), 0 4px 16px rgba(90,20,30,.07);
--shadow-lift: 0 2px 6px rgba(90,20,30,.10), 0 12px 28px rgba(90,20,30,.10);
}
@media (prefers-color-scheme: dark) {
:root {
/* Dark mode inverts the problem: #c8102e on a dark ground is muddy and hard to read, so the
brand lightens. The danger colour lightens too, but stays a step behind, preserving the
same light-vs-dark relationship the whole system depends on. */
--bg: #14100f; --surface: #1d1718; --border: #35292b;
--text: #f2e9ea; --text-muted: #a8989b;
--brand: #ff5c6e; --brand-vivid: #ff7080; --accent: var(--brand);
--accent-soft: #2a1a1d; --accent-contrast: #14100f;
/* On a dark tint the correction runs the other way: lighter, not darker. */
--brand-on-tint: #ff8592;
--ok: #4ade80; --bad: #b34a4a; --warn: #f0a94a;
--shadow: 0 1px 2px rgba(0,0,0,.5), 0 6px 24px rgba(0,0,0,.4);
--shadow-lift: 0 2px 8px rgba(0,0,0,.55), 0 14px 32px rgba(0,0,0,.45);
}
}
* { box-sizing: border-box; }
body {
margin: 0; font-family: var(--font); color: var(--text); background: var(--bg);
line-height: 1.55; -webkit-font-smoothing: antialiased;
}
/* ⭐ Form controls do NOT inherit the page font. Browsers give ,