/* ============================================================================
   Elev8 design tokens (assets/elev8-tokens.css)
   Source: docs/design/elev8-design-system.md, section L (copied verbatim below),
   followed by four contrast corrections at the end of this file (see there).
   Load this file FIRST, before assets/elev8-ds.css and before any inline <style>.
   It only defines custom properties and font faces: it styles nothing itself.

   Fonts are self-hosted (no CDN: the staff app is an offline-capable PWA).
   Latin subsets of Hanken Grotesk 400/600/700/800 and IBM Plex Mono 400/600,
   from the OFL-1.1 npm packages @fontsource/hanken-grotesk@5.3.0 and
   @fontsource/ibm-plex-mono@5.3.0. Licences: assets/fonts/OFL-*.txt.
   A face is only downloaded when a page renders text in it.
   URLs are relative to this file, so they resolve to /assets/fonts/.
   ============================================================================ */

@font-face{
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/hanken-grotesk-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:800; font-display:swap;
  src:url('fonts/hanken-grotesk-latin-800-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- Section L, verbatim ---- */
:root {
  /* Neutrals (shared with OCTRA Advance) */
  --e8-ink-900:#1D1D1F; --e8-ink-700:#3A3A3F; --e8-ink-500:#6E6E73; --e8-ink-400:#86868B;
  --e8-border:#ECECEE; --e8-border-strong:#D6D6DB;
  --e8-surface:#FFFFFF; --e8-surface-page:#F5F5F7; --e8-surface-sunken:#F0F0F2; --e8-surface-raised:#FAFAFB;
  /* Navigation (Elev8-specific charcoal) */
  --e8-nav-bg:#14181D; --e8-nav-line:#232930; --e8-nav-ink:#F4F5F7; --e8-nav-muted:#9298A3; --e8-nav-active:#1F252C; --e8-nav-marker:#EE7D00;
  /* Brand */
  --e8-brand:#C25E00; --e8-brand-hover:#9A4A00; --e8-brand-pressed:#7D3C00; --e8-brand-accent:#EE7D00; --e8-brand-subtle:#FBEEE0; --e8-on-brand:#FFFFFF;
  --e8-focus-ring:0 0 0 3px rgba(194,94,0,.22);
  /* Status */
  --e8-critical:#C0301A; --e8-critical-subtle:#FBD8CF; --e8-critical-tint:#FDF4F2;
  --e8-warning:#B06A00;  --e8-warning-subtle:#FCE3B6;  --e8-warning-tint:#FCF7EC;
  --e8-success:#0F7A3D;  --e8-success-subtle:#CFEEDA;
  --e8-info:#3B5566;     --e8-info-subtle:#E9EFF3;
  --e8-neutral-subtle:#F0F0F2;
  --e8-maintenance:var(--e8-warning); --e8-availability-ok:var(--e8-success); --e8-availability-short:var(--e8-warning); --e8-availability-none:var(--e8-critical);
  /* Text aliases */
  --e8-text-strong:var(--e8-ink-900); --e8-text-body:var(--e8-ink-700); --e8-text-muted:var(--e8-ink-500); --e8-text-disabled:var(--e8-ink-400);
  /* Type */
  --e8-font:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --e8-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --e8-font-email:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --e8-display:800 30px/36px var(--e8-font); --e8-h1:800 24px/30px var(--e8-font); --e8-h2:700 20px/26px var(--e8-font);
  --e8-h3:700 16px/22px var(--e8-font); --e8-title:600 15px/20px var(--e8-font); --e8-body:400 14px/20px var(--e8-font);
  --e8-small:400 12.5px/17px var(--e8-font); --e8-label:600 12.5px/16px var(--e8-font); --e8-micro:600 11px/15px var(--e8-font);
  --e8-table:400 13.5px/18px var(--e8-font); --e8-meta:400 12px/16px var(--e8-font);
  --e8-number:600 13.5px/18px var(--e8-font); --e8-money-lg:800 22px/26px var(--e8-font);
  --e8-tracking-caps:.08em; --e8-tracking-nav:.14em;
  /* Spacing (4px base) */
  --e8-s-1:4px; --e8-s-2:8px; --e8-s-3:12px; --e8-s-4:16px; --e8-s-5:20px; --e8-s-6:24px; --e8-s-8:32px; --e8-s-10:40px; --e8-s-12:48px;
  --e8-gutter:20px; --e8-gutter-mobile:12px; --e8-panel-pad:16px; --e8-panel-pad-dense:12px;
  /* Radius */
  --e8-r-control:6px; --e8-r-panel:8px; --e8-r-sheet:12px; --e8-r-pill:999px; --e8-r-thumb:4px;
  /* Borders */
  --e8-bw:1px; --e8-bw-strong:1.5px; --e8-bw-marker:3px;
  /* Shadows (overlays only) */
  --e8-shadow-md:0 2px 6px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --e8-shadow-lg:0 8px 24px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);
  --e8-shadow-xl:0 16px 48px rgba(0,0,0,.12);
  --e8-scrim:rgba(20,26,31,.3);
  /* Component heights */
  --e8-h-header:52px; --e8-h-page-header:64px; --e8-h-control:36px; --e8-h-control-sm:32px; --e8-h-control-lg:48px;
  --e8-h-row-dense:36px; --e8-h-row:44px; --e8-h-row-op:48px; --e8-h-row-mobile:56px; --e8-h-table-head:32px; --e8-h-nav-item:34px;
  --e8-h-bottom-bar:64px; --e8-w-sidebar:240px; --e8-w-rail:64px; --e8-w-drawer:420px; --e8-w-detail:320px; --e8-w-catalogue:300px;
  --e8-icon:18px; --e8-icon-sm:16px; --e8-icon-lg:22px; --e8-tap-min:44px;
  /* Breakpoints (documentation; use in media queries) */
  --e8-bp-sm:640px; --e8-bp-md:768px; --e8-bp-lg:1024px; --e8-bp-xl:1280px; --e8-bp-2xl:1536px;
  /* Motion */
  --e8-dur-fast:120ms; --e8-dur-base:200ms; --e8-ease-out:cubic-bezier(.16,1,.3,1); --e8-ease-inout:cubic-bezier(.4,0,.2,1);
  /* Z-index */
  --e8-z-sticky:100; --e8-z-dropdown:1000; --e8-z-drawer:1200; --e8-z-modal:1300; --e8-z-toast:1400; --e8-z-tooltip:1500;
}
@media (prefers-reduced-motion: reduce){ :root{ --e8-dur-fast:0ms; --e8-dur-base:0ms; } }

/* ---- Contrast corrections to section L (06.10.2026; confirmed by Wes Pierce, MD, 06.10.2026, BD-22) ----
   Section L claims white on brand is 4.6:1 and that critical, warning and success text on
   their subtle tints is at least 4.5:1. Its own values measure 4.29, 4.30, 3.42 and 4.36:1
   (WCAG 2.x), so status chips would be harder to read than they are today (the Warehouse
   "In progress", "On hold", "HIGH" and "URGENT" chips). These four values are the smallest
   darkening of each colour that meets the ratio section L claims:
     brand     #C25E00 -> #BA5A00   white on it 4.62:1
     critical  #C0301A -> #B72E19   on critical-subtle 4.63:1
     warning   #B06A00 -> #925800   on warning-subtle 4.64:1 (and 5.4:1 or more on white and tints)
     success   #0F7A3D -> #0E753B   on success-subtle 4.66:1
   Everything that refers to these tokens (maintenance, availability-*, the --e-* aliases in
   elev8-ds.css) follows automatically. The section L block above stays verbatim, so the spec
   can be diffed against it; delete this block once section L carries passing values.
   tests/ui/smoke.mjs asserts every ratio section L claims, and the rendered contrast of every
   text-bearing elev8-ds.css component. Details: docs/design/deviations.md. */
:root {
  --e8-brand:#BA5A00;
  --e8-critical:#B72E19;
  --e8-warning:#925800;
  --e8-success:#0E753B;
}