/* tokens.css — every global custom property, and the three theme blocks.
Doctrine is :root; Field Briefing is body[data-theme="light"]; Los Angeles is
body[data-theme="wla"]. Hues belong here: everywhere else a colour is a
property or a neutral black/white alpha (test/consistency.mjs enforces it),
so a theme is one block, not a hunt. Theme-scoped overrides that cannot be expressed as a token stay
beside their theme so the three palettes read side by side.
Load order is the cascade order — see the 's list */
--optgroup-ground: #0c1107;
--on-accent: #0a0d07; /* a mark printed on an accent fill (the checkbox tick) */
--control-ground: rgba(0, 0, 0, 0.32); /* text fields and selects */
--control-ground-focus: rgba(0, 0, 0, 0.5);
--dropzone-ground: rgba(0, 0, 0, 0.32); /* the file picker */
--inset-ground: rgba(0, 0, 0, 0.28); /* the order input well */
--button-ground: rgba(255, 255, 255, 0.04);
--entry-ground: rgba(255, 255, 255, 0.018); /* a feed entry, lifted off the ruled feed */
--hover-tint: rgba(127, 127, 127, 0.14); /* neutral grey: reads on every ground */
--hover-tint-soft: rgba(127, 127, 127, 0.10);
--scrollbar-track: rgba(0, 0, 0, 0.2);
--scrim: rgba(0, 0, 0, 0.62); /* behind a modal or a sheet */
--shadow-ink: rgba(0, 0, 0, 0.6); /* a drawer's edge shadow */
--shadow-overlay: 0 18px 60px rgba(0, 0, 0, 0.55);
--crest-wash-top: rgba(155, 39, 29, 0.20); /* the rail crest: --accent-red-deep */
--crest-wash-bottom: rgba(155, 39, 29, 0.05);
--crest-edge: rgba(210, 58, 44, 0.32); /* --accent-danger */
--crest-hatch: rgba(210, 58, 44, 0.06);
/* Printed plates (phase 13): the commander portraits, the sector terrain
plates and the emblem ship as ONE grayscale engraving each, and the
#plate-duotone filter (index.html) prints them in two inks: black
becomes --plate-ink, white becomes --plate-paper. Luminance order is
kept, so a face is never a negative. The paper is held below the
accents, so a plate never outshouts the readouts around it. */
--plate-ink: #0c1108;
--plate-paper: #a9b27a;
--radius: 3px;
/* Type. Spacing, colour, radius and motion all became tokens; type
stayed 123 bare font-size literals, 74 tracking values and 30
leadings — which is why tracking had drifted to eight undocumented
values and leading to five. The ramp is the six documented steps
and nothing else.
In rem, not px: a fixed ratio scale and respecting the reader's
browser font-size setting are separate decisions, and the Fixed
Scale Rule only ever argued the first. Measured before this: a
reader who sets their default to 24px moved zero of five sampled
elements. At a 16px default these render byte-identically to the
px values they replace. */
--type-data: 0.6875rem; /* 11px — status rows, channel tags, mono readouts */
--type-caption: 0.75rem; /* 12px — field hints, notes, metadata */
--type-control: 0.8125rem; /* 13px — buttons, tabs, chips, routine feed */
--type-body: 0.9375rem; /* 15px — prose, form values, the payload tier */
--type-claim: 1.125rem; /* 18px — view titles, and what a proof moment asserts */
--type-display: 1.3125rem; /* 21px — the wordmark alone */
/* One stack per voice. 29 of 65 font-family declarations named a face
with no fallback at all, and four in app.js dropped to a bare
generic — including both blocks carrying the raw packet,
which The Mono Is Evidence Rule governs. */
--font-display: 'Oswald', 'IBM Plex Sans', sans-serif;
--font-body: 'IBM Plex Sans', system-ui, sans-serif;
--font-data: 'IBM Plex Mono', 'Courier New', monospace;
/* Leading and tracking, per role. Eighteen distinct tracking values
and nine leadings were in the stylesheet against a spec that names
nine and six; three documented roles set no leading at all and were
silently taking the browser default.
--leading-body is 1.6 here and 1.55 on Field Briefing: light text on
a dark ground reads tighter than the same ratio does dark-on-light,
so the two dark themes get the compensation and the manila one does
not. That is the first time this system has distinguished them. */
--leading-display: 1;
--leading-claim: 1.2;
--leading-title: 1.3;
--leading-label: 1.4;
--leading-body: 1.6;
--leading-data: 1.5;
--track-body: 0.01em;
--track-display: 0.06em;
--track-control: 0.08em;
--track-tab: 0.1em;
--track-data: 0.12em;
--track-title: 0.14em;
--track-label: 0.18em;
--track-seal: 0.22em;
/* Spacing scale. DESIGN.md described this ladder for a long time before
it existed as code, so the stylesheet drifted onto a second, generic
8/12/16 ladder and two thirds of every spacing value landed off both.
These are the ladder: ~1.4x per step, odd-numbered on purpose so it
never coincides with the browser default and every gap is a choice
somebody made. Reach for a token; if none fits, the layout is wrong,
not the scale. */
--space-hair: 3px; /* optical nudges only — never structural */
--space-tight: 4px; /* inside a control: chip gaps, icon offsets */
--space-micro: 6px; /* label to its field */
--space-snug: 9px; /* between siblings in one group */
--space-base: 13px; /* the default: block padding, list gaps */
--space-shell: 18px; /* container padding, group separation */
--space-loose: 26px; /* between unrelated groups */
--space-section: 36px;
--gutter-shell: clamp(12px, 1.8vw, 26px); /* shell inline gutter, fluid */ /* between sections of a view */
/* Motion system — one decelerating curve, two durations. Enters ease out
(content arrives and settles); no bounce, matching the console register. */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur-fast: 140ms;
--dur-med: 240ms;
}
/* ============================================================
THEME B — FIELD BRIEFING (light: olive ink on manila paper)
============================================================ */
body[data-theme="light"] {
--bg-color: #dcd8c3;
--surface-color: #edeadb; /* manila panel */
--surface-2: #e3e0cf; /* recessed */
--surface-raised: #f4f2e6;
--surface-border: rgba(58, 64, 28, 0.22);
--surface-border-strong: rgba(58, 64, 28, 0.40);
--text-primary: #23260f; /* olive ink */
--text-secondary: rgba(35, 38, 15, 0.74); /* ~4.5:1 on manila */
--text-faint: rgba(35, 38, 15, 0.76); /* placeholder/meta on light */
--accent-color: #4b5d17; /* army green, deepened to clear 4.5:1 on manila */
/* The feed's six channels each own a colour, and no two of them may
resolve to the same value in a theme. They did: user and error
shared a stripe in all three, and learning and retrieval shared
stripe AND label in two — on Los Angeles the six collapsed to
three. --ch-learned is the one hue this palette had free, and it
is violet-magenta on purpose: it carries blue, so it is the only
channel that survives the red-green axis the rest of the console
lives on. */
--ch-learned: #510840;
--tint-learned: rgba(81, 8, 64, 0.09);
--tint-system: rgba(75, 93, 23, 0.07);
--focus-ring: rgba(75, 93, 23, 0.16); /* the accent at focus-halo strength */
--scanline: rgba(75, 93, 23, 0.030); /* the feed's ruled-paper texture */
--wash-machine: rgba(75, 93, 23, 0.06); /* the room's ambient light, machine side */
--wash-command: rgba(176, 36, 23, 0.05); /* and command side */
--grid-line: rgba(75, 93, 23, 0.045);
--scrollbar-thumb: rgba(85, 105, 26, 0.30);
--scrollbar-thumb-hover: rgba(85, 105, 26, 0.50);
--selection: rgba(176, 36, 23, 0.28);
--select-chevron: url("data:image/svg+xml;utf8,