/* ══════════════════════════════════════════════════════════════════════════
   BML Operations Hub — tokens.css (C1, Hub-Wide User Audit 2026-09-28)
   THE design-token contract for every BML app (hub · tasks · roster · library).
   Source of truth: 05-Prototypes-and-Mockups/Hub-Redesign-Prototype-2026-09-28.html
   (:root block) + Master Document §4 + _Shared/Brand Kit/BRAND.md.

   Rules (audit C1 acceptance):
   · This file exists ONCE (hub/public/assets/tokens.css) and is copied
     byte-identical into tasks/roster/library public/assets/ — the test suites
     pin the four copies equal.
   · It is the FIRST stylesheet on every page, before bml-tokens.css (the
     2026-07 baseline it supersedes) and before any app CSS.
   · Module CSS declares NO raw hex and NO px font-size — everything is a
     var() from here. The only rendered size below 13.5px anywhere in the
     product is the `.flag` module-status badge (11px caps) — Courtney's
     scoped ruling, 2026-09-28.
   · The canonical set lives on :root under NEW names (--brand, --paper …)
     so loading it changes NOTHING on a page that has not opted in. A page
     opts in with <html class="ui-v2">: that block re-points the legacy
     names (--maroon, --wash, --fs-body …) the older stylesheets still read,
     so the WHOLE page re-inks + re-sizes to the contract. Tier-A surfaces
     (Admin console, Finance, Work-Orders management) opt in from the start;
     every staff-visible page opts in only behind the preview flag (Tier B).
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── brand ── */
  --brand:#8C1B23;            /* BRAND.md maroon — oklch(.42 .14 22) */
  --brand-deep:#6E1219;
  --brand-bright:#A93038;     /* hover accent on dark surfaces */
  --brand-08:#F6E9EA;         /* tint: selected / active fills */
  --brand-04:#FBF3F4;         /* hover wash */

  /* ── neutrals — a whisper of maroon hue, chroma ≈ .006 ── */
  --paper-page:#F7F5F5;       /* the page ground */
  --paper:#FFFFFF;            /* cards, panels, table rows */
  --line:#E7E0E1;
  --line-strong:#D5CBCC;
  --ink:#211A1B;              /* body — 14.9:1 on paper */
  --ink-2:#5C5152;            /* secondary — 6.4:1 */
  --ink-3:#736768;            /* metadata — ≥4.5:1 on every surface */

  /* ── rationed status trio + info (SEMANTIC only, never identity) ── */
  --ok:#1E6B45;     --ok-bg:#E8F2EC;     --ok-line:#BCD8C8;
  --warn:#8A5A00;   --warn-bg:#FAF0DC;   --warn-line:#E3CD9E;
  --danger:#B3261E; --danger-bg:#FBEAE9; --danger-line:#EFC2BF;
  --info:#274A6D;   --info-bg:#E9EFF5;

  /* ── categorical series (charts, schedule blocks) — the maroon language + neutrals,
     never a rainbow (BRAND.md; Roster/Reference re-ink to these) ── */
  --cat-1:#8C1B23; --cat-2:#D9A3A8; --cat-3:#5C5152; --cat-4:#B9AEAF;
  --cat-5:#6E1219; --cat-6:#E9CDD0; --cat-7:#211A1B; --cat-8:#8A5A00;
  --cat-9:#274A6D; --cat-10:#1E6B45;

  /* ── type — families self-hosted (fonts.css), never a CDN ── */
  --f-display:"Fraunces",Georgia,serif;
  --f-ui:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  /* ── type ramp — the §4.2 floors ARE the smallest steps ── */
  --fs-h1:30px;        /* page titles, Fraunces 600 (28–34 allowed) */
  --fs-h2:20px;        /* section headings */
  --fs-h3:16.5px;      /* panel headings */
  --fs-body:15.5px;    /* the default voice */
  --fs-table:14px;     /* table cells + form labels — the dense floor */
  --fs-label:14px;
  --fs-colhead:13.5px; /* caps column headers ONLY */
  --fs-mono:13.5px;    /* refs / timestamps */
  --fs-helper:13.5px;  /* helper + metadata text */
  --fs-stat:31px;      /* stat-card numbers, Fraunces (24–31) */
  --fs-stat-sm:24px;   /* health-card numbers */
  --fs-nav:14.5px;     /* sidebar items */
  --fs-navhead:15px;   /* sidebar group band headers */
  --fs-flag:11px;
  --fs-band:17px;         /* C31 (2026-09-29): banded section-header title */      /* .flag module-status badges — THE scoped exception */

  /* ── geometry ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --r-s:7px; --r-m:11px; --r-l:16px;
  --shadow-1:0 1px 2px rgb(33 26 27/.05),0 2px 8px rgb(33 26 27/.05);
  --shadow-2:0 4px 14px rgb(33 26 27/.09),0 14px 40px rgb(33 26 27/.12);
  --scrim:rgb(33 26 27/.32);  /* drawer / dialog backdrop */
  --sidebar-w:250px; --header-h:62px;
  --row-h:52px;

  /* ── focus ring (a11y §4.5) ── */
  --focus:0 0 0 2px var(--paper),0 0 0 4px var(--brand);

  /* ── z scale — semantic, never 9999 ── */
  --z-sticky:20; --z-drawer-bg:30; --z-drawer:31; --z-toast:40; --z-modal:50;

  /* ── motion ── */
  --ease:cubic-bezier(.22,1,.36,1);   /* ease-out-quint */
  --t-fast:.15s; --t-base:.22s; --t-slow:.3s;
}

/* Opt-in: the page adopts the contract wholesale. Legacy token names that the
   pre-C1 stylesheets (bml-tokens.css, hub.css, shell.css, module CSS) still
   read are re-pointed here, so those files render in the new ink, palette and
   floors without being edited one rule at a time. (html.ui-v2 beats every
   :root declaration by specificity, whatever the load order.) */
html.ui-v2{
  /* names the 2026-07 baseline (bml-tokens.css / hub.css) ALSO declares — re-asserted
     at the canonical value so the older file can never win on an opted-in page */
  --ink:#211A1B; --line:#E7E0E1; --ok:#1E6B45; --warn:#8A5A00;
  --fs-h1:30px; --fs-h2:20px; --fs-h3:16.5px; --fs-body:15.5px; --fs-label:14px; --fs-helper:13.5px;
  --ease:cubic-bezier(.22,1,.36,1);
  --cat-1:#8C1B23; --cat-2:#D9A3A8; --cat-3:#5C5152; --cat-4:#B9AEAF; --cat-5:#6E1219; --cat-6:#E9CDD0; --cat-7:#211A1B; --cat-8:#8A5A00; --cat-9:#274A6D; --cat-10:#1E6B45;
  /* legacy names → contract */
  --maroon:var(--brand); --maroon-deep:var(--brand-deep); --maroon-bright:var(--brand-bright);
  --maroon-tint:var(--brand-08); --wash:var(--brand-08); --canvas:var(--paper-page);
  --bg:var(--paper-page); --surface:var(--paper);
  --muted:var(--ink-2); --ink-soft:var(--ink-3);
  --line-soft:var(--line);
  --err:var(--danger); --err-bg:var(--danger-bg);
  --serif:var(--f-display); --sans:var(--f-ui); --mono:var(--f-mono);
  --fs-dense:var(--fs-table); --fs-sched:var(--fs-body);
  --radius:var(--r-l); --radius-sm:var(--r-m); --r-sm:var(--r-s);
  --shadow-sm:var(--shadow-1); --shadow-md:var(--shadow-2); --shadow-lg:var(--shadow-2);
  color-scheme:light;
}