/* tokens.css, the single source of visual truth (spec 01 §2, CLAUDE.md §9).
   The first :root block is copied VERBATIM from spec 01 §2. Changing its
   values is danger-zone (CLAUDE.md §12), ask the human first. */

/* Self-hosted variable fonts (OFL), no external font/CDN requests, ever. */
@font-face {
  font-family: 'DM Sans';
  src: url("../fonts/dm-sans-var.7c87a648293f.woff2") format('woff2-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url("../fonts/fraunces-var.eb2486760f75.woff2") format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* surfaces & text */
  --bg:#F6F5F0; --surface:#FFFFFF; --surface-alt:#F0EDE6;
  /* muted text passes WCAG AA on both #FFFFFF and #F6F5F0 (operator
     readability pass 2026-08-06): dim ~6.4:1 for secondary copy and
     labels, faint ~5.3:1 for hints, meta and placeholders. Faint is a
     reading color, not a decoration: never lighten it or add opacity. */
  --text:#1A1917; --text-dim:#625E56; --text-faint:#706B61; --border:#E5E1D8;
  /* brand & status */
  --accent:#2D6A4F; --accent-light:#D8F3DC; --accent-hover:#1B4332;
  --warn:#E07A2F; --warn-light:#FFF0E1; --danger:#C1362B; --danger-light:#FDE8E6;
  /* type */
  --font-body:'DM Sans',sans-serif; --font-display:'Fraunces',serif;
  /* motion */
  --ease-spring:cubic-bezier(.16,1,.3,1); --ease-smooth:cubic-bezier(.4,0,.2,1);
}

/* Additive tokens (task 01.7), shadows/overlays/tints lifted verbatim from
   design/reference/*.jsx so components.css never needs a raw color. */
:root {
  --white:#FFFFFF;                          /* text on accent/danger fills */
  --warn-text:#8B4513;                      /* hs-pill conf-mid text (products ref) */
  --overlay:rgba(26,25,23,.35);             /* modal/panel backdrop */
  --border-translucent:rgba(0,0,0,.08);     /* swatch border */
  --shadow-card:0 2px 14px rgba(26,25,23,.06);
  --shadow-float:0 4px 18px rgba(26,25,23,.10);
  --shadow-panel:-8px 0 40px rgba(0,0,0,.08);
  --ring-accent:0 0 0 3px rgba(45,106,79,.12);  /* selected option ring */
  --accent-tint:rgba(45,106,79,.03);
  /* time-saved scoreboard (operator 2026-07-12): the ONE deliberate
     departure from DM Sans/Fraunces, sports-board counter digits. System
     mono stack: crisp, tabular, zero font bytes shipped. */
  --font-counter:ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono','Consolas',monospace;
  --board-seam:rgba(255,255,255,.16);          /* flip-tile mid seam */
  --warn-tint:rgba(224,122,47,.03);
}

/* Additive tokens (task 05.2), material-swatch colors lifted verbatim from
   design/reference/tariffs-review-queue.jsx + tariffs-supplier-answer.jsx
   (Swatch components) so the curated swatch classes stay var()-only. */
:root {
  --sw-loop-1:#8B6F47; --sw-loop-2:#A0845C; --sw-loop-bg:#C4A876;
  --sw-felt-1:#9A8F7F; --sw-felt-2:#B5AA99;
  --sw-woven-shade:rgba(139,111,71,.5);
  --sw-wool-1:#E8E0D4; --sw-wool-bg:#D4C8B8; --sw-wool-mid-2:#A8B5C4;
  --sw-syn-1:#8FA5B8; --sw-syn-2:#A8BCCC;
  --sw-sisal-1:#C9B37E; --sw-sisal-2:#DBC896;
  --sw-jute-1:#A98F5F; --sw-jute-2:#C4AA78; --sw-jute-shade:rgba(120,95,55,.45);
  --sw-coir-1:#6B4F2E; --sw-coir-bg:#8B6F47;
  --sw-sea-1:#9AA87E; --sw-sea-2:#B5C098;
}

/* Additive tokens (dashboard onboarding, empty state), lifted verbatim from
   docs/dashboard-onboarding-v2.html. The file-card blue accent and the navy
   "what happens next" panel have no existing token equivalents; the green and
   amber families reuse --accent* / --warn*. The navy panel's text/hairline
   tints are white-on-navy overlays (precedent: --overlay, --border-translucent
   above), not new brand colours. */
:root {
  --info:#4D8090; --info-light:#E6F1F3;        /* file-card blue accent + soft */
  --navy:#0F2E35;                               /* next-panel background */
  --navy-heading:#FFFFFF;                       /* next-panel headings / strong */
  --navy-accent:#81D5B5;                        /* next-panel eyebrow */
  --navy-step:#8DDCBD;                          /* step-number numeral */
  --navy-text:#B8CBC7;                          /* next-panel body copy */
  --navy-text-dim:#A9BFBB;                      /* step description */
  --navy-line:rgba(255,255,255,.16);            /* step connector / hairlines */
  --navy-fill:rgba(255,255,255,.06);            /* step-number fill */
  --navy-note-line:rgba(255,255,255,.10);       /* control-note border */
  --navy-note-fill:rgba(255,255,255,.05);       /* control-note fill */
}

/* Per-system tile accents for the Connect-a-system page (concept
   docs/import-system-guide.html). One brand-ish hue per system, lifted
   VERBATIM from the concept. Used ONLY as the tile's --system accent (a
   monogram tint + hover/selected hairline via color-mix); never a raw color
   in components.css. Precedent: the --sw-* swatch block above. */
:root {
  --sys-shopware:#1687c9;
  --sys-magento:#e26b34;
  --sys-shopify:#5b8f32;
  --sys-business-central:#2f72b7;
  --sys-akeneo:#704c9a;
  --sys-bigcommerce:#337b87;
  --sys-woocommerce:#8758a8;
  --sys-dandomain:#cf692b;
  --sys-uniconta:#327aae;
  --sys-economic:#32896a;
  --sys-odoo:#a64a55;
  --sys-vismanet:#287cae;
  --sys-businessnxt:#9a4674;
  --sys-netsuite:#39749d;
  --sys-shipmondo:#2f5d8a;
  --sys-prestashop:#b34a76;
  --sys-webshipper:#2d7a86;
  --sys-golden-planet:#9a8155;
  --sys-other:#617774;
}