/* ═══════════════════════════════════════════════════════════════
   TRADEdraft — DESIGN TOKENS · THE SINGLE SOURCE OF TRUTH
   Linked FIRST by every surface: the marketing site, the builder (app.html),
   the portal (dashboard.html), and the customer pages (accept/invoice).
   Change a brand value HERE and it changes everywhere. Do NOT re-declare
   these in site.css / engine.css / dashboard.html — that is how they drift.
   Brand-locked: Blueprint Navy #002147 · Oxidised Brass #C5A059.

   ── WHY THIS FILE IS NOW COMPLETE (16 Jul 2026) ────────────────────────────
   It used to hold only the palette + fonts, so every surface topped it up with
   its own :root — and they disagreed. Two things that cost real money:

   1. --steel was corrected here to #566B89 (it had FAILED WCAG AA at 4.02:1),
      but dashboard.html kept a private copy of the OLD #6B80A0, so the whole
      portal still rendered the retired grey months after the "fix".
   2. --brass-deep meant TWO different colours: #A9863F here, #86692D in
      site.css. site.css's own note admitted #A9863F "is too light for WCAG AA
      (3.4:1 on white)" and darkened it FOR THE MARKETING PAGES ONLY, because
      site.css isn't linked by the app — deliberately leaving the BUILDER, the
      surface trades actually work in, with brass text at 3.40:1. engine.css
      uses it for `color:` five times. That is now ONE value: the AA-passing one.

   A token must mean ONE thing everywhere. If two surfaces need different
   colours, that is two ROLES and it needs two names — see the brass roles below.

   ── CONTRAST (measured, on white / on chalk #F5F3EE) ───────────────────────
   Any token used for TEXT must clear WCAG AA 4.5:1.
     --brass       #C5A059  2.46:1  ✗  NEVER text. Rules, underlines, ticks, fills.
     --brass-deep  #86692D  5.16 / 4.65  ✓  brass TEXT on light.
     --brass-soft  #D8BD86  8.82 on navy ✓  brass text on DARK.
     --steel       #566B89  5.44 / 4.90  ✓
     --slate       #1E3A52  12.6         ✓
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* ── Navy family ── */
  --navy:#002147;
  --ink-navy:#002147;
  --navy-deep:#001A38;   /* site alias */
  --navy-2:#001A38;      /* app + site alias — same colour as --navy-deep */
  --navy-3:#0A2C52;

  /* ── Brass family — named by ROLE, because the shades are not interchangeable ──
     Reach for the role, not the shade: --brass can never be text, --brass-deep always can. */
  --brass:#C5A059;       /* THE accent. Rules, underlines, ticks, fills. NOT text (2.46:1). */
  --brass-deep:#86692D;  /* brass TEXT on a light surface (AA 5.16:1). Was #A9863F here and
                            #86692D in site.css — one value now; the app's failing brass is fixed. */
  --brass-soft:#D8BD86;  /* brass text on DARK navy (8.82:1) */

  /* ── Neutrals ── */
  --chalk:#F5F3EE;
  --white:#FFFFFF;
  --white-soft:#FDFCF8;  /* soft, warm section white — the marketing "white" surface that alternates with --chalk down a page (warmer & gentler than harsh #FFFFFF, still clearly lighter than chalk). NB: app paper/cards stay pure --white/--paper. */
  --paper:#FFFFFF;       /* app alias for white surfaces */
  --slate:#1E3A52;
  --steel:#566B89;       /* muted slate-blue — darkened from #6B80A0, which failed WCAG AA at 4.02:1 */

  /* ── Structure — shared by every surface (were duplicated in engine.css + dashboard.html) ── */
  --line:#E0DDD8;
  --line-strong:#bfb6a3;
  --r-sm:6px;
  --r-md:10px;

  /* ── Status — semantic, and separate from the brand accent ── */
  --green:#2F6F43;  --green-soft:#e8f0e2;
  --amber:#b87b1a;  --amber-soft:#fbeec9;
  --red:#B3402F;    --red-soft:#fae3e3;
  /* The quote/job lifecycle set. INK = the dot + word (all AA on white); TINT = a row's left edge
     (decorative, deliberately quieter — a lost job shouldn't shout red down the list). */
  --st-neutral:#5C6675; --st-neutral-tint:#d3d1c7;   /* draft            5.81:1 */
  --st-info:#274b78;    --st-info-tint:#c9ced8;      /* sent · archived  8.88:1 */
  --st-warn:#8a5a10;    --st-warn-tint:#C29B3C;      /* viewed · pending 5.91:1 */
  --st-good:#1d5130;    --st-good-tint:#2F6F43;      /* accepted · paid  9.24:1 */
  --st-bad:#a0272a;                                   /* lost             7.45:1 */

  /* ── Type ── */
  --serif:'Newsreader',Georgia,serif;
  --sans:'Space Grotesk',system-ui,sans-serif;
  --prose:'DM Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace; /* numeric data, refs & status only — never prose */
  /* One ladder. The same role was being written at 10/10.5/11/11.5px and 12.5/13/13.5/14px
     depending on which file you opened; these are the sizes that were already dominant. */
  --fs-micro:11px;      /* uppercase micro-labels */
  --fs-hint:12.5px;     /* hints + fine print */
  --fs-sm:13px;         /* secondary body / status lines */
  --fs-body:14px;       /* body + control labels */
  --fs-title:19px;      /* serif card title */
  --lh-body:1.5;
}

/* ── AUTOFILL: keep an input WHITE when the browser fills it ────────────────────────────────────
   Every text field across the app already declares background:#fff, and computes to it — but a
   field the browser AUTOFILLS is painted by Chrome/Edge with their own pale wash, drawn as a UA
   background that `background-color` cannot override. So the trade's own details (company name,
   address, email — exactly the fields a password manager fills) rendered tinted while every other
   box on the same panel was white. Owner spotted it, 19 Jul 2026.

   The inset box-shadow is the only reliable way to paint over that wash, and it needs !important
   because the component sheets load AFTER this one and their :focus rule would otherwise replace
   it — which is why the focus variant below re-states the focus ring alongside the fill.

   This is the one element rule in a file of custom properties. It lives here because tokens.css is
   the ONE stylesheet every surface links (the app, the portal, settings, the rate book, accept and
   the marketing pages), and the alternative was the same rule copied into three component sheets
   that would drift apart — which is the exact failure this codebase keeps hitting. */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--slate);
  caret-color:var(--slate);
  -webkit-box-shadow:0 0 0 1000px #fff inset!important;
          box-shadow:0 0 0 1000px #fff inset!important;
}
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #fff inset,0 0 0 3px rgba(0,33,71,.08)!important;
          box-shadow:0 0 0 1000px #fff inset,0 0 0 3px rgba(0,33,71,.08)!important;
}