/* WantNot design tokens — single import root for all dashboard pages.
 *
 * Pages link this BEFORE palette.css and their own <style>:
 *   <link rel="stylesheet" href="tokens.css">
 *   <link rel="stylesheet" href="palette.css">
 * Later rules win, so per-page :root values still override these where a page
 * has not been migrated yet; new code should use the tokens directly.
 *
 * Kind colours (--k1…--k7) are deliberately ABSENT here. They live in
 * dashboard/palette.css, generated from shared/skus.json via
 * tools/generate_frontend_catalog.py — never hand-edit that file, and never
 * redeclare --kN inline except the .doc print pin in dashboard.html (which
 * keeps literals so the report prints identically in both themes).
 *
 * --paper is Audit Paper (#FFFFFF), --wash is Slate Wash (#EEF1F4).
 * Light is the default; dark mirrors brand/BRAND.md + palette.css dark ramp.
 */
:root{
  --paper:#FFFFFF; --wash:#EEF1F4;
  /* P1-B: --page IS the wash (Slate Wash #EEF1F4); surfaces that must print
     identically in both themes keep the same hex as a literal inside the
     .doc pin in dashboard.html (print immunity per DECISIONS.md:3). */
  --page:#EEF1F4; --card:#FFFFFF; --card-2:#F7F9FC;
  --line:#E4E9F0; --line-2:#EFF2F7;
  --ink:#0C1017; --ink-2:#4C5765; --ink-3:#8A94A4;
  --keep:#1A212C; --hot:#FF4D2E; --good:#12A56B;
  --focus:#FF4D2E;
  --display:'Archivo',system-ui,sans-serif;
  --ui:'Instrument Sans',system-ui,sans-serif;
  --r:16px; --r-sm:10px;
  --shadow:0 1px 2px rgba(12,16,23,.08),0 8px 28px -14px rgba(12,16,23,.18);
  --shadow-lift:0 2px 6px rgba(12,16,23,.10),0 18px 46px -18px rgba(12,16,23,.28);
  --lift:0 2px 8px rgba(12,16,23,.10),0 24px 56px -22px rgba(12,16,23,.30);
  /* Ledger rows (P0-B composes these): row padding + WCAG 2.2 AA target floor. */
  --ledger-row-pad:12px 18px; --target-min:24px;
  /* Hatch overlays: pattern + label carry meaning alongside colour, and survive
     grayscale print. Composed over kind fills (background: <hatch>, var(--kN)). */
  --hatch-none:none;
  --hatch-diagonal:repeating-linear-gradient(45deg,transparent 0 4px,rgba(12,16,23,.30) 4px 5px);
  --hatch-diagonal-rev:repeating-linear-gradient(-45deg,transparent 0 4px,rgba(12,16,23,.30) 4px 5px);
  --hatch-horizontal:repeating-linear-gradient(0deg,transparent 0 3px,rgba(12,16,23,.30) 3px 4px);
  --hatch-vertical:repeating-linear-gradient(90deg,transparent 0 3px,rgba(12,16,23,.30) 3px 4px);
  --hatch-dots:radial-gradient(rgba(12,16,23,.35) 1px,transparent 1.5px);
  /* P0-B triage encoding: one distinct hatch per kind (k1…k7 index the ORDER
     from kinds.js, not a colour), plus the absorbed hatch. Every kind swatch
     renders colour fill + hatch overlay + adjacent kLabel() text, so pattern
     and label survive achromatopsia simulation and grayscale print where hue
     alone collapses. Pages apply these via a data-hatch="kN" ::after overlay
     (see dashboard.html) so the inline background:var(--kN) fill is untouched.
     --hatch-k5 is dots and needs background-size:5px 5px at the use site. */
  --hatch-k1:repeating-linear-gradient(45deg,transparent 0 3px,rgba(12,16,23,.32) 3px 4px);
  --hatch-k2:repeating-linear-gradient(-45deg,transparent 0 3px,rgba(12,16,23,.32) 3px 4px);
  --hatch-k3:repeating-linear-gradient(90deg,transparent 0 4px,rgba(12,16,23,.32) 4px 5px);
  --hatch-k4:repeating-linear-gradient(0deg,transparent 0 4px,rgba(12,16,23,.32) 4px 5px);
  --hatch-k5:radial-gradient(rgba(12,16,23,.38) 1px,transparent 1.6px);
  --hatch-k6:repeating-linear-gradient(45deg,transparent 0 5px,rgba(12,16,23,.32) 5px 6px),repeating-linear-gradient(-45deg,transparent 0 5px,rgba(12,16,23,.32) 5px 6px);
  --hatch-k7:repeating-linear-gradient(45deg,transparent 0 7px,rgba(12,16,23,.28) 7px 8px);
  --hatch-absorbed:repeating-linear-gradient(-45deg,transparent 0 5px,rgba(12,16,23,.25) 5px 6px);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#12161D; --wash:#090B0F;
    --page:#090B0F; --card:#12161D; --card-2:#171C25;
    --line:#232A35; --line-2:#1B212B;
    --ink:#EDF1F7; --ink-2:#A3AEBC; --ink-3:#747E8A;
    --keep:#DDE4EC; --hot:#FF6647; --good:#2FCE8E;
    --focus:#FF6647;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px -14px rgba(0,0,0,.7);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5),0 18px 46px -18px rgba(0,0,0,.85);
    --lift:0 2px 8px rgba(0,0,0,.5),0 24px 56px -22px rgba(0,0,0,.9);
    --hatch-diagonal:repeating-linear-gradient(45deg,transparent 0 4px,rgba(221,228,236,.30) 4px 5px);
    --hatch-diagonal-rev:repeating-linear-gradient(-45deg,transparent 0 4px,rgba(221,228,236,.30) 4px 5px);
    --hatch-horizontal:repeating-linear-gradient(0deg,transparent 0 3px,rgba(221,228,236,.30) 3px 4px);
    --hatch-vertical:repeating-linear-gradient(90deg,transparent 0 3px,rgba(221,228,236,.30) 3px 4px);
    --hatch-dots:radial-gradient(rgba(221,228,236,.35) 1px,transparent 1.5px);
    --hatch-k1:repeating-linear-gradient(45deg,transparent 0 3px,rgba(221,228,236,.32) 3px 4px);
    --hatch-k2:repeating-linear-gradient(-45deg,transparent 0 3px,rgba(221,228,236,.32) 3px 4px);
    --hatch-k3:repeating-linear-gradient(90deg,transparent 0 4px,rgba(221,228,236,.32) 4px 5px);
    --hatch-k4:repeating-linear-gradient(0deg,transparent 0 4px,rgba(221,228,236,.32) 4px 5px);
    --hatch-k5:radial-gradient(rgba(221,228,236,.38) 1px,transparent 1.6px);
    --hatch-k6:repeating-linear-gradient(45deg,transparent 0 5px,rgba(221,228,236,.32) 5px 6px),repeating-linear-gradient(-45deg,transparent 0 5px,rgba(221,228,236,.32) 5px 6px);
    --hatch-k7:repeating-linear-gradient(45deg,transparent 0 7px,rgba(221,228,236,.28) 7px 8px);
    --hatch-absorbed:repeating-linear-gradient(-45deg,transparent 0 5px,rgba(221,228,236,.25) 5px 6px);
  }
}
/* Triage targets (P0-B): every interactive triage element (legend chips, keys,
   filter chips, copilot hints, group heads) measures at least 24px per
   WCAG 2.2 AA §2.5.8. Pages meet this with padding, never font-size, and keep
   their own geometry; this class is the audit floor for new controls. */
.triage-target{min-height:var(--target-min);min-width:var(--target-min)}
/* Forced colours: patterns flatten, so swatches keep a border and the always-
   rendered text label carries the meaning on its own. */
@media (forced-colors:active){
  .sw[data-hatch],.spendbar .seg[data-hatch],.bar .seg-w[data-hatch]{border:1px solid CanvasText}
}
/* Money in columns must not jitter between renders. */
.tabular{font-variant-numeric:tabular-nums}
/* P3 motion budget + focus (final polish, smallest blast radius).
 *
 * Exactly one orchestrated load sequence exists: index.html hero (bar draw
 * → waste lift → figure count-up, once, per brand/BRAND.md Motion). Every
 * other page loads still — no per-page bespoke timelines, no scroll-timeline
 * progress/head effects (deleted from all six pages).
 *
 * All remaining motion answers user action (hover/focus/active) inside
 * 120–150ms. Carve pin/hover is transform/opacity/filter only with
 * isolation:isolate retained at the use site — zero layout shift. Pages
 * reference --dur-carve/--dur-response so timing stays centralised here. */
:root{
  --dur-response:140ms;
  --dur-carve:150ms;
  --ease-response:cubic-bezier(.3,.9,.4,1);
}
/* Focus base: every interactive element gets a visible ring from --focus.
 * Specificity is :where() (zero), so per-page rules keep their own offsets
 * and carve colours. Text inputs keep their custom glow (out of this
 * selector); file/select/checkbox controls are covered. */
:where(a,button,summary,[tabindex],[role="button"],select,input[type="file"],input[type="checkbox"],input[type="radio"]):focus-visible{
  outline:2px solid var(--focus);outline-color:var(--focus,#FF4D2E);outline-offset:2px;
}
@media (forced-colors:active){
  :where(a,button,summary,[tabindex],[role="button"],select,input[type="file"],input[type="checkbox"],input[type="radio"]):focus-visible{
    outline-color:Highlight;
  }
}
/* Instant fallback everywhere, including the home sequence: durations
 * collapse to ~zero so content paints at its final state; smooth scroll off.
 * (Pages keep their own reduce blocks as a second layer; this one covers all
 * six, including pages with no page-level block.) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}
/* Print mirror (P2-A): paper never inherits the dark theme. The .doc report
   in dashboard.html pins the same light literals (print immunity per
   DECISIONS.md:3); this block keeps every other var() consumer — hatch
   overlays, focus ring, ledger rows — on the light ramp when printing from
   dark mode, so Letter PDFs from either theme are equivalent. Same hexes as
   :root above; keep in step by hand. */
@media print{
  :root{
    --paper:#FFFFFF; --wash:#EEF1F4;
    --page:#EEF1F4; --card:#FFFFFF; --card-2:#F7F9FC;
    --line:#E4E9F0; --line-2:#EFF2F7;
    --ink:#0C1017; --ink-2:#4C5765; --ink-3:#8A94A4;
    --keep:#1A212C; --hot:#FF4D2E; --good:#12A56B;
    --focus:#FF4D2E;
    --hatch-diagonal:repeating-linear-gradient(45deg,transparent 0 4px,rgba(12,16,23,.30) 4px 5px);
    --hatch-diagonal-rev:repeating-linear-gradient(-45deg,transparent 0 4px,rgba(12,16,23,.30) 4px 5px);
    --hatch-horizontal:repeating-linear-gradient(0deg,transparent 0 3px,rgba(12,16,23,.30) 3px 4px);
    --hatch-vertical:repeating-linear-gradient(90deg,transparent 0 3px,rgba(12,16,23,.30) 3px 4px);
    --hatch-dots:radial-gradient(rgba(12,16,23,.35) 1px,transparent 1.5px);
    --hatch-k1:repeating-linear-gradient(45deg,transparent 0 3px,rgba(12,16,23,.32) 3px 4px);
    --hatch-k2:repeating-linear-gradient(-45deg,transparent 0 3px,rgba(12,16,23,.32) 3px 4px);
    --hatch-k3:repeating-linear-gradient(90deg,transparent 0 4px,rgba(12,16,23,.32) 4px 5px);
    --hatch-k4:repeating-linear-gradient(0deg,transparent 0 4px,rgba(12,16,23,.32) 4px 5px);
    --hatch-k5:radial-gradient(rgba(12,16,23,.38) 1px,transparent 1.6px);
    --hatch-k6:repeating-linear-gradient(45deg,transparent 0 5px,rgba(12,16,23,.32) 5px 6px),repeating-linear-gradient(-45deg,transparent 0 5px,rgba(12,16,23,.32) 5px 6px);
    --hatch-k7:repeating-linear-gradient(45deg,transparent 0 7px,rgba(12,16,23,.28) 7px 8px);
    --hatch-absorbed:repeating-linear-gradient(-45deg,transparent 0 5px,rgba(12,16,23,.25) 5px 6px);
  }
}