/* The design system's NEUTRAL tokens — everything that is not an area's identity (css/area-tokens.css has those).
 *
 * One value per role. Until 2026-10-14 the shared sheets wrote these as literals, and the same role had drifted to
 * several values: 12 greys for secondary text, 9 hairline colours, 19 radii, 94 shadows (measured on master and the
 * two design branches: docs/design-system/README.md). The values below are the ones each role has on MOST
 * pages today, so pointing a rule at its token changes nothing on those pages — and the outliers become visible.
 *
 * Loaded on every page, before every other application sheet (RefUi::headLinks(), printed by the four root
 * layouts), so a component can read `var(--ref-*)` with no fallback. A value carrying a decision cites it (`D-n`,
 * docs/design-system/decisions.md).
 */
:root {
    /* ---- Text: three steps and a glyph colour (WCAG AA on white for the three text steps) ---- */
    --ref-ink-title: #1a202c;  /* the page title (D-3), on the page ground — 13.1:1 on #e3e3e3 */
    --ref-ink: #2c3e50;        /* titles, values, body text — 10.98:1 */
    --ref-ink-2: #4a5568;      /* labels, secondary text — 7.53:1 */
    --ref-muted: #64748b;      /* help, hints, captions — 4.76:1 */
    --ref-glyph: #94a3b8;      /* decorative icons only, never text */
    --ref-code-bg: #0f1b2a;      /* a block of code to copy (D-111): the API key examples, a recorded call, the catalogue */
    --ref-code-ink: #e2e8f0;     /* … and its text: 14.1:1 on it */
    --ref-chart-context: #838fa3; /* a chart's reference series beside the one it is about (D-110): 3.3:1 on white, ΔE 18.7 from the accounting ink */
    --ref-on-fill: #fff;       /* text and icons on a filled area colour (the primary button) */
    --ref-on-fill-2: rgba(255, 255, 255, .85); /* secondary text on a dark fill: the save pill's status, its summary's label */
    --ref-on-fill-line: rgba(255, 255, 255, .25); /* a divider on a dark fill (the save pill's summary, D-60) */
    --ref-glyph-faint: #b6c2cf; /* an empty state's icon */

    /* ---- Surfaces ---- */
    --ref-surface: #fff;           /* a card */
    --ref-surface-head: #fafbfc;   /* a card's header, a tile */
    --ref-surface-hover: #f7fafc;  /* a row or a button under the pointer */
    --ref-row-hover: #f5f9ff;      /* a grid row under the pointer, and its row buttons */
    --ref-row-odd: #fcfdfe;        /* the quiet zebra of a grid */
    --ref-row-chosen: #f5fbf7;     /* a selection row that is chosen (the ground of --ref-note-ok-bg, D-33) */
    --ref-row-missing: #fff7ed;    /* a selection row a chosen one requires and is not chosen yet (D-33) */
    --ref-surface-sunk: #f1f4f7;   /* a neutral chip, a well inside a card */
    --ref-surface-faint: #f4f7fa;  /* an empty state's icon disc */
    --ref-ground: #e3e3e3;         /* the page behind the cards */

    /* ---- Lines ---- */
    --ref-hairline: #eef2f5;       /* a card's border */
    --ref-divider: #f0f3f6;        /* inside a card: header rule, rows */
    --ref-border: #e6ebf0;         /* a button, a chip */
    --ref-border-field: #7d8ca0;   /* a form control's boundary: 3.43:1 on white, 3.31 on a card header (§1.0, D-31) */
    --ref-border-soft: #cbd5e0;    /* a line that is not a control's boundary: a drop zone's dashes, a separator, a dot */
    --ref-border-emph: #dce8f0;    /* the emphasised tile (D-9) */

    /* ---- States: a tinted ground and its ink (the chips' pairs) ---- */
    --ref-ok: #1a7c47;     --ref-ok-bg: #e6f7ee;
    --ref-warn: #9a6410;   --ref-warn-bg: #fef3e2;
    --ref-danger: #c0392b; --ref-danger-bg: #fdecec;
    --ref-danger-edge: #f0c9c4;   /* a destructive button's border */
    --ref-danger-strong: #e74c3c; /* … and on hover */
    --ref-danger-field: #c0392b;  /* a field in error, at rest and focused: the danger ink, 5.44:1 — darker than a resting
                                     field, so it reads without the colour (D-31) */
    --ref-focus-danger: 0 0 0 3px rgba(192, 57, 43, .18); /* the soft ring of a focused field in error */
    --ref-info: #064a71;   --ref-info-bg: #eaf1f7;
    --ref-off: #5a6675;    --ref-off-bg: #f1f4f7;
    --ref-save: #157347;   /* the save button (css/save-action.css) */

    /* ---- Notes: a tinted ground and a full border carry the tone (D-10: no side stripe) ---- */
    --ref-note-bg: #fbfcfd;        --ref-note-edge: #e6eaef;
    --ref-note-danger-bg: #fdf8f7; --ref-note-danger-edge: #f4d3ce;
    --ref-note-warn-bg: #fffdf7;   --ref-note-warn-edge: #f3e3c2;
    --ref-note-info-bg: #f6f9fc;   --ref-note-info-edge: #d2e1ef; /* D-52: a tone, no longer a neutral box (#f9fbfd /
                                     #dbe6f0); as visible as the ok pair, and the note's muted text still 4.50:1 on it */
    --ref-note-ok-bg: #f5fbf7;     --ref-note-ok-edge: #cfe8d9;

    /* ---- Radius ramp: 12 cards · 8 controls · 4 inside a grid · pill ---- */
    --ref-radius-card: 12px;
    --ref-radius-control: 8px;
    --ref-radius-inset: 4px;
    --ref-radius-pill: 999px;

    /* ---- Elevation ---- */
    --ref-shadow-card: 0 4px 6px rgba(0, 0, 0, .02), 0 1px 3px rgba(0, 0, 0, .05);
    --ref-shadow-lift: 0 8px 20px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .05);
    --ref-shadow-pop: 0 10px 25px rgba(0, 0, 0, .08);
    --ref-shadow-soft: 0 1px 2px rgba(0, 0, 0, .03); /* a field resting on a card: the search box */
    --ref-shadow-pin: -6px 0 6px -6px rgba(15, 23, 42, .08); /* the divider of a grid's pinned column */
    --ref-wash: inset 0 0 0 999px rgba(0, 0, 0, .12); /* darkens a filled button on hover (D-1) */
    --ref-shadow-modal: 0 12px 40px rgba(0, 0, 0, .18);

    /* ---- Type ramp (px: 1rem is 10px in this application) ---- */
    --ref-fs-micro: 11px;    /* uppercase grid headers, counters */
    --ref-fs-small: 13px;    /* labels, hints, captions */
    --ref-fs-body: 14px;
    --ref-fs-title: 16px;    /* a small card's title (a tile, a modal section) */
    --ref-fs-section: 18px;  /* a card's title (D-2) */
    --ref-fs-display: 22px;  /* a tile's figure */
    --ref-fs-page: 26px;     /* the page title */
    --ref-fs-hero: 34px;
    --ref-fw-title: 600;
    --ref-fw-button: 500;

    /* ---- Controls and spacing ---- */
    --ref-control-h: 42px;
    --ref-control-h-sm: 34px; /* the small control, also a field inside a grid row (D-32); the small BUTTON is 32 px by its padding (`btn-sm`, D-23) */
    --ref-gap-card: 24px;     /* between cards */
    --ref-pad-card-y: 16px;
    --ref-pad-card-x: 24px;   /* D-2 */
    --ref-gap: 12px;
    --ref-gap-sm: 8px;

    /* ---- Page width (D-12): forms and settings / lists and hubs ---- */
    --ref-page-max: 1500px;
    --ref-page-max-wide: 1760px;
    --ref-page-pad: 24px;     /* the frame's own padding: the layout's flash strip keeps to it too (D-71) */
    --ref-head-min: 38px;     /* a page header followed by pills: a header button's height, with or without one (D-74) */
}

/* ---- The focus, in the page's area (D-14) ----
   The tokens that read an `--area-*` value. A custom property is resolved where it is DECLARED: on :root alone these took
   :root's defaults — Marina's teal — and every page inherited a teal focus whatever its area (found 2026-10-19 on the
   warehouse's amber pages). Each element that sets an area (`body.bs-area-*`, a wrapper painting another one) computes
   them again with its own colours. DesignTokensTest keeps any new area-reading token here. */
:root,
[class*="bs-area-"] {
    --ref-focus: 0 0 0 3px var(--area-accent-ring, rgba(26, 188, 156, .15));
    --ref-focus-strong: 0 0 0 3px var(--area-accent-ring-strong, rgba(26, 188, 156, .25));
    /* THE focus indicator of a control: a solid inner ring carries the 3:1 WCAG 2.2 asks (the translucent ring alone
       composites to 1.39:1 over white), the soft outer one the shape. */
    --ref-focus-ring: 0 0 0 2px var(--area-ink, #12806a), 0 0 0 5px var(--area-accent-ring, rgba(26, 188, 156, .15));
    --ref-focus-inset: inset 0 0 0 2px var(--area-ink, #12806a); /* the same ring, inside a box that clips (a card's summary) */
    --ref-shadow-on: 0 2px 6px var(--area-accent-ring-strong, rgba(26, 188, 156, .25)); /* a pill filled with the ink (D-33) */
}