/* tokens.css — Adare design tokens (Phase 2, Session N1).
 *
 * The CSS face of the design tokens. Every value here mirrors public/tokens.js
 * (T.cssVars) EXACTLY — tests/tokens-agreement.test.js pins the two together so
 * the JS and CSS faces can never drift. tokens.js is the source; edit both, or
 * the agreement test fails. Values are the app's own census (Pass 3 §2), not new
 * ones. Consumed by :root here today for future/SSR CSS; the babel app reads the
 * same values via window.T. The legacy inline <style> block migrates onto these
 * gradually (Q5: "DM Sans screens migrate as touched").
 */

/* ─── THE REDESIGN-BRIEF NAME MAPPING (L1, 26 Jul 2026) ───────────────────────
 *
 * The 2026 redesign brief and its mockup (adare-app.html) use a DIFFERENT token
 * vocabulary from this file, and for two names it means the OPPOSITE thing:
 *
 *     brief --brand  = #F04E23 orange   →  HERE that colour is --accent (#FF3600)
 *     brief --page   = #F4F3F1          →  HERE it is --bg (#F4F5F3)
 *     HERE  --brand  = #323E48 slate    →  the brief has no name for this
 *
 * U7 ruled HYBRID (25 Jul): keep these names, do not adopt the brief's. The
 * count behind the ruling is ~900 consumers across adare-quotes and
 * adare-service-ops, of which ~195 are inline `style=` attributes inside
 * GENERATED CUSTOMER EMAIL AND PDF HTML (server.js), where CSS custom properties
 * do not work at all. A rename therefore cannot converge the brand — it forks
 * it, and the forked half is the half the customer sees.
 *
 * The brief's STATUS set is not new either; it is this file's status pairs under
 * other names. Do not add it — it would fork 371 live consumers:
 *
 *     brief --good     / --good-wash      =  --ok-fg   / --ok-bg     (107 uses)
 *     brief --warning  / --warning-wash   =  --warn-fg / --warn-bg    (93 uses)
 *     brief --critical / --critical-wash  =  --bad-fg  / --bad-bg     (91 uses)
 *     brief --info     / --info-wash      =  --info-fg / --info-bg    (80 uses)
 *     brief --serious                     =  no equivalent — genuinely new
 *
 * NOT ADOPTED, and why (see ui-review/L1-token-census.md for the evidence):
 *   • the type scale --t-hero…--t-micro — this repo has NO type tokens, but its
 *     1038 font-size declarations are a 0.5px continuum across 31 values, not a
 *     7-step scale. Naming 7 of them is a design decision, not a census.
 *   • the chart series --s1…--s3 — the one real ordered palette
 *     (web/lib/retailInsights.js:42) binds colour to CATEGORY, not to series
 *     order, so it does not map onto s1/s2/s3.
 *   • the ordinal ramp --o1…--o4 — no source in either repo; the nearest thing
 *     encodes rank by opacity, not hue (public/bobcat-scorecard.js:387).
 *
 * Where the brief says "the orange button colour", use --accent. Where it says
 * "good/warning/critical", use the --ok-* / --warn-* / --bad-* pairs above.
 * ────────────────────────────────────────────────────────────────────────────*/
:root{
  --nav-width:200px;

  --brand:#323E48;
  --accent:#FF3600;
  --navy:#1B3A5C;
  --text:#1a1a1a;
  --sub:#5a5650;
  --muted:#9a958d;
  --line:#eaecea;
  --line-warm:#ede9e3;
  --bg:#F4F5F3;
  --panel:#f5f4f2;
  --ok-bg:#EAF3DE;
  --ok-fg:#27500A;
  --warn-bg:#FAEEDA;
  --warn-fg:#633806;
  --bad-bg:#FCEBEB;
  --bad-fg:#791F1F;
  --destructive:#c62828;
  --info-bg:#E6F1FB;
  --info-fg:#0C447C;
  --wa:#25D366;

  /* Semantic additions (UI-0). One accessible foreground amber (WCAG AA on
     white) that supersedes the ad-hoc #d97706 / #c98a17 scattered per page; a
     muted green accent; a second, lighter tertiary grey; and the white card
     surface that folds the per-page #fff every standalone page re-invented. */
  --amber:#b45309;
  --accent-green:#3a6b4f;
  --muted-2:#a3aaae;
  --card:#ffffff;

  /* Categorical violet (added for Service Ops, 28 Jul 2026). The service
     schedule board colours jobs by GROUP and warranty is one of them, but this
     palette had no violet at all — so that board was using stock Tailwind
     purple-400, a hue belonging to no token file. Toned down from the #7C3AED
     in the schedule design prototype, which reads as neon beside --navy and
     --amber. Categorical like --navy/--amber, not a state like --warn-fg. */
  --violet:#6B3FA0;

  /* The COOL family (Phase 13). Used all over web/** but never defined until
     now, so each silently fell back to an inline literal and the Next app
     rendered cool greys while the tokens above describe warm ones. Naming them
     stops the silent fallback. Values are what renders TODAY — nothing moves.

     ⚠️ OPEN DESIGN QUESTION, deliberately not answered here: --ink-soft
     duplicates --sub and --line-soft duplicates --line. Folding the cool family
     onto the warm one is a visible recolouring of the Next app, so it is a
     design decision for William, not a cleanup.

     ✅ --ink RESOLVED 22 Jul (William): an ALIAS of --text, not a colour of its
     own. Four answers had been in play — #1d2a33 (34 web/ decls), #323E48 (22
     decls, now on --brand), #16202A (the north-star mockup) and var(--text)
     (public/os.html). The shipped shell had it right; the mockup was moved onto
     the alias to match. Kept as `var(--text)` rather than a copied hex so the
     two can never drift back into two near-identical near-blacks. */
  --ink:var(--text);
  --ink-soft:#5b6b75;
  --line-soft:#eef1f4;
  --warn-line:#efd9ad;

  /* Breakpoints. ⚠️ NOT usable in a media-query condition — CSS forbids
     var() there and `@media (max-width: var(--bp-md))` never matches. These
     exist for JS (matchMedia) and as the agreed set that
     tests/token-guard.test.js enforces against every @media in the repo. */
  --bp-sm:640px;
  --bp-md:900px;
  --bp-lg:1200px;

  --font-display:'Outfit',sans-serif;
  --font-body:'Plus Jakarta Sans',sans-serif;
  --font-mono:monospace;

  --radius-chip:6px;
  --radius-control:8px;
  --radius-card:12px;
  --radius-card-lg:14px;
  --radius-modal:16px;

  --shadow-card:0 1px 2px rgba(50,62,72,.04);
  --shadow-modal:0 20px 60px rgba(0,0,0,.2);
  --shadow-toast:0 8px 30px rgba(0,0,0,.15);

  --space-xs:4px;
  --space-sm:6px;
  --space-md:8px;
  --space-lg:10px;
  --space-xl:12px;
  --space-xxl:16px;

  --z-nav:100;
  --z-mobile-tabs:8000;
  --z-drawer:8500;
  --z-modal:9000;
  --z-modal-top:9200;
  --z-sync-err:9998;
  --z-toast:9999;
}