/* ==========================================================================================================
   Design tokens — the ONLY file in this app allowed to contain a colour literal (lint_css.js enforces it).

   Two layers. PRIMITIVES are the palette: named by hue and step, meaningless on their own. SEMANTIC tokens
   are what the rest of the CSS — and app.js, for the charts — actually use: named by ROLE (surface, ink,
   ok, warn, danger, info, accent). Re-skinning the dashboard means editing the semantic layer here and
   nothing else; no component knows which hex it is wearing.

   The RGB triples (--ink-rgb etc.) exist because CSS cannot put an alpha on a token that holds a hex;
   rgba(var(--ink-rgb), .06) can. Keep a triple in step with its token when you change one.
   ========================================================================================================== */
:root{
  /* ---- primitives -------------------------------------------------------------------------------------- */
  --c-slate-950:#0b1220; --c-slate-900:#0f172a; --c-slate-800:#1e293b; --c-slate-700:#334155; --c-slate-600:#475569;
  --c-slate-500:#64748b; --c-slate-400:#94a3b8; --c-slate-300:#cbd5e1; --c-slate-200:#e2e8f0; --c-slate-100:#f1f5f9;
  --c-slate-50:#f8fafc;  --c-white:#ffffff;      --c-black:#000000;
  --c-navy-700:#17365d;  --c-navy-600:#1f3864;   --c-navy-500:#264478;
  --c-teal-700:#2e6171;  --c-teal-600:#0f766e;   --c-teal-500:#0d9488;  --c-teal-100:#ccfbf1;
  --c-orange-700:#c2410c;--c-orange-600:#ea580c; --c-orange-500:#f97316;--c-orange-100:#ffedd5; --c-orange-50:#fff7ed;
  --c-green-800:#1f6b36; --c-green-700:#1d7a1d;  --c-green-600:#16a34a; --c-green-500:#10b981;  --c-green-200:#bfe0bf; --c-green-100:#e3f0e3;
  --c-amber-800:#7a4a0e; --c-amber-700:#8a5410;  --c-amber-600:#b96f14; --c-amber-500:#d98a2b;  --c-amber-300:#ffd38a; --c-amber-200:#f0d3a8; --c-amber-100:#fdf1e2; --c-amber-50:#fff8ec;
  --c-red-900:#7f1d1d;   --c-red-800:#8a2f2c;    --c-red-700:#9b2f2c;   --c-red-500:#ef4444;    --c-red-400:#ff6b6b;   --c-red-200:#eec3c1; --c-red-100:#fbeceb; --c-red-50:#fff4f4;
  --c-blue-800:#1a4b8c;  --c-blue-700:#1d4ed8;   --c-blue-600:#2f6feb;  --c-blue-500:#3b82f6;   --c-blue-400:#4da3ff;  --c-blue-200:#bcd6ef; --c-blue-100:#e7f0fa; --c-blue-50:#f4f7ff;
  --c-violet-700:#6d28d9;--c-violet-500:#7c5cff;--c-violet-50:#faf9ff;   --c-pink-700:#be185d;
  --c-orange-800:#9a3412;

  /* Apple HIG materials, Shkukani colour. Page ground is Apple gray; ink is navy, not generic slate. */
  --c-apple-gray:#f5f5f7; --c-apple-fill:#e8e8ed; --c-hairline:rgba(60,60,67,.12);
  --bg:var(--c-apple-gray);
  --surface:var(--c-white);
  --surface-2:#fbfbfd;
  --surface-3:var(--c-apple-fill);
  --line:var(--c-hairline);
  --line-strong:rgba(60,60,67,.22);
  --ink:var(--c-navy-700);
  --ink-strong:var(--c-slate-900);
  /* WCAG 2.2 AA (ISO/IEC 40500), 2026-09-26: text needs 4.5:1. slate-500 read 4.37:1 on the page ground and
     slate-400 2.35:1 -- both used for text. lint_css.js now measures every pair below and fails under 4.5. */
  --ink-muted:#526076;            /* 6.38 on surface · 5.86 on bg · 5.22 on surface-3 */
  --ink-faint:#5b6b82;            /* 5.43 on surface · 4.98 on bg -- still a step lighter than muted */
  --on-dark:var(--c-white);
  --on-dark-muted:#c5cddc;
  --rail:rgba(245,245,247,.82);
  --toolbar:rgba(251,251,253,.78);

  /* ---- semantic: brand & accent ----------------------------------------------------------------------- */
  --brand:var(--c-navy-700);
  --brand-2:var(--c-slate-800);
  --brand-deep:var(--c-navy-600);    /* chart series 1, hero gradients */
  --brand-teal:var(--c-teal-700);
  --accent:var(--c-orange-500);
  --accent-ink:var(--c-orange-700);   /* the accent as TEXT: orange-500 reads 2.8:1 on white, 700 reads 5.2:1 */
  --accent-strong:var(--c-orange-600);
  --accent-soft:var(--c-orange-50);
  /* white text sits on these: orange-500 gave 2.80:1, orange-700 gives 5.18:1 */
  --on-accent-bg:var(--c-orange-700); --on-accent-bg-hover:var(--c-orange-800);

  /* ---- semantic: status ------------------------------------------------------------------------------- */
  --ok:var(--c-green-800);        --ok-vivid:var(--c-green-500);  --ok-soft:var(--c-green-100);  --ok-line:var(--c-green-200);
  --warn:var(--c-amber-700);      --warn-vivid:var(--c-amber-500);--warn-soft:var(--c-amber-100);--warn-line:var(--c-amber-200); --warn-wash:var(--c-amber-50); --warn-on-dark:var(--c-amber-300);
  --danger:var(--c-red-700);      --danger-vivid:var(--c-red-500);--danger-soft:var(--c-red-100); --danger-line:var(--c-red-200); --danger-wash:var(--c-red-50); --danger-deep:var(--c-red-900); --danger-on-dark:var(--c-red-400);
  --info:var(--c-blue-800);       --info-vivid:var(--c-blue-500); --info-soft:var(--c-blue-100);  --info-line:var(--c-blue-200);  --info-wash:var(--c-blue-50);  --info-strong:var(--c-blue-600); --info-on-dark:var(--c-blue-400);
  --ai:var(--c-violet-700);       --ai-soft:var(--c-violet-50);   /* violet-500 read 4.15:1 as text; 700 reads 7+ */
  /* filter state (Stage 3b, 2026-09-27): a value kept, and a value left out. Leaving something out is a choice, not an
     error, so it is a neutral slate -- never the danger red it used to be -- and every excluded value says so in words. */
  --filter-on:var(--c-navy-700);  --filter-on-soft:var(--c-blue-50);
  --filter-ex:var(--c-slate-600); --filter-ex-soft:var(--c-slate-100); --filter-ex-line:var(--c-slate-300);
  /* alert severities (Phase 4 panel) */
  --sev-critical:var(--danger-vivid); --sev-warn:var(--warn-vivid); --sev-good:var(--ok-vivid); --sev-info:var(--info-vivid);

  /* ---- semantic: charts (read by app.js theme() at init — never hardcode a series colour in JS) -------- */
  /* Series colours (2026-09-26): Okabe-Ito hues, the standard colour-blind-safe set, darkened where needed so every
     mark reaches 3:1 on a card (WCAG 1.4.11). The old set paired a green with a red and put four series under 3:1
     (amber 2.16, grey 2.46, green 2.71, light blue 2.96). lint_css.js measures all twelve. */
  --chart-1:var(--c-navy-600); --chart-2:#d55e00; --chart-3:#0072b2; --chart-4:#007a5e;
  --chart-5:#a8457f; --chart-6:#9a6200; --chart-7:#2b83ba; --chart-8:var(--c-teal-700);
  --chart-9:#6b4e9b; --chart-10:#5b6b82; --chart-11:var(--c-navy-500); --chart-12:#9e480e;
  --chart-grid:#eef1f7; --chart-tick:#5b6b82; --chart-tooltip-bg:rgba(31,56,100,.96);   /* tick labels are text: 5.43:1 */
  --heat-rgb:31,56,100;                       /* heatmap cell ramp: rgba(var(--heat-rgb), a) */

  /* ---- alpha bases ---------------------------------------------------------------------------------- */
  --ink-rgb:23,54,93; --white-rgb:255,255,255; --black-rgb:0,0,0; --accent-rgb:249,115,22;
  --ok-rgb:22,163,74; --info-rgb:59,130,246; --brand-rgb:31,56,100; --line-rgb:60,60,67; --danger-rgb:239,68,68;

  /* ---- people's roles (sign-in widget, Admin): white text on each, all >= 4.5:1 ------------------------ */
  --role-superadmin:var(--c-violet-700); --role-ceo:var(--c-amber-800); --role-cfo:var(--c-green-800);
  --role-coo:var(--c-blue-800); --role-hr:var(--c-pink-700); --role-store-manager:var(--c-slate-600);
  --role-floor-advisor:var(--ink-muted);

  /* ---- scale ------------------------------------------------------------------------------------------ */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:22px; --r-pill:999px;
  --sh-1:0 0 0 0.5px var(--line), 0 1px 2px rgba(var(--ink-rgb),.04);
  --sh-2:0 0 0 0.5px var(--line), 0 2px 8px rgba(var(--ink-rgb),.05);
  --sh-3:0 0 0 0.5px var(--line), 0 8px 28px rgba(var(--ink-rgb),.08);
  --shadow:var(--sh-1); --shadow-hover:var(--sh-2);
  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-base:15px; --fs-lg:17px; --fs-xl:22px; --fs-2xl:32px;
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,"Helvetica Neue",sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --font-mono:"SF Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --dur-fast:120ms; --dur:180ms; --dur-slow:280ms; --ease:cubic-bezier(.22,1,.36,1);
  --h-chart-sm:200px; --h-chart-md:240px; --h-chart-lg:300px;
  --rail-w:220px; --sidebar-w:268px; --topbar-h:52px; --tabbar-h:56px;

}

/* Motion is opt-out at the OS level: nothing in this app may animate for a user who asked it not to. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
}