/* ═══════════════════════════════════════════════════════════════
   BT Warehouse — design tokens
   The source of truth for colour, type, spacing, elevation and motion.
   Never hard-code a value that has a token here.

   Load order matters: tokens → base → components → shell → map.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* ── Brand and action are the same colour ──────────────────────
     The sibling Hyco app separates them because its red brand collides
     with "danger". Blue Tiger blue has no such conflict, so #3F98CC is
     the mark AND the only "go" colour in the app. */
  --brand:#3F98CC;
  --accent:#3F98CC; --accent-strong:#2F80B4; --accent-deep:#245F86;
  --accent-t10:rgba(63,152,204,.10);
  --accent-t18:rgba(63,152,204,.18);
  --accent-t28:rgba(63,152,204,.28);
  /* #3F98CC is 3.2:1 on white but 5.9:1 on near-black, so a FILLED accent
     control carries DARK text. White-on-blue read badly through a chiller door. */
  --on-accent:#06131C;

  /* ── Surfaces ─────────────────────────────────────────────────
     Depth comes from stepping the surface plus a 1px border, not from
     large shadows — correct on a near-black ground. */
  --bg:#090C12;
  --surface-1:#10141D; --surface-2:#161B26; --surface-2-hover:#1A2030;
  --surface-3:#1E2433;  --surface-4:#262E3E;
  --overlay:rgba(6,9,14,.72);

  --border:#232B39; --border-strong:#313B4D; --border-faint:#1A2230;

  /* --text-muted carries labels, hints and table headers, so it must clear
     WCAG AA (4.5:1) on every surface it lands on: #848EA5 is 4.7:1 on
     surface-3, 5.3:1 on surface-2. It was #5E6882 (2.8–3.1:1), which is the
     first thing to vanish on a smeared phone at arm's length.
     --text-faint is 2:1 — disabled and decorative only, NEVER words. */
  --text:#EAEEF6; --text-sub:#98A2B8; --text-muted:#848EA5; --text-faint:#444E66;

  /* ── Stock health. RESERVED. ──────────────────────────────────
     Green = there is enough. Amber = running out, or expiring inside 7
     days. Red = out, or past date.

     These three never appear on a nav item, a progress bar, a brand
     element or a confirm button. If one of them is doing anything other
     than reporting the state of stock, it is wrong. The single sanctioned
     exception is a destructive control (write off, archive) — in this app
     destroying stock IS a stock-health event.

     The fg / 13%-tint fill / 32%-tint border trio is the reusable formula. */
  --ok:#4ADE80;     --ok-tint:rgba(74,222,128,.13);  --ok-border:rgba(74,222,128,.32);
  --warn:#FFB454;   --warn-tint:rgba(255,180,84,.13); --warn-border:rgba(255,180,84,.32);
  --danger:#FF5C5C; --danger-tint:rgba(255,92,92,.13); --danger-border:rgba(255,92,92,.32);
  --danger-tint-strong:rgba(255,92,92,.22);

  /* Neutral information (temperature tags, "no expiry") borrows the accent
     rather than introducing a fifth hue — the palette stays four wide. */
  --info:var(--accent); --info-tint:var(--accent-t10); --info-border:var(--accent-t28);

  /* ── Type ─────────────────────────────────────────────────────
     Mono carries every NUMBER, CODE, BIN LABEL and ALL-CAPS micro-label —
     the things read at arm's length and compared down a column.
     Deliberately no webfont: the shell is precached and served over
     warehouse wifi, so a blocking third-party stylesheet would be a
     regression in exactly the conditions this app exists for. */
  --font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --num-feature:"tnum" 1,"lnum" 1;

  /* Type scale. Seven steps, in rem so the "Larger text" setting (More) scales
     the whole app from one root value. 12px is the floor: nothing a picker
     has to READ goes below it — the same floor Fiori sets. Before this there
     were twenty sizes between 9px and 24px. */
  --fs-label:.75rem;    /* 12 — micro-labels, pills, captions        */
  --fs-meta:.8125rem;   /* 13 — secondary lines under a title        */
  --fs-small:.875rem;   /* 14 — small buttons, toasts, hints in body */
  --fs-body:.9375rem;   /* 15 — body, list titles                    */
  --fs-title:1.0625rem; /* 17 — card and screen titles               */
  --fs-qty:1.75rem;     /* 28 — the quantity a picker acts on        */
  --fs-hero:2.5rem;     /* 40 — reserved for a single-task screen    */

  /* ── Radii, spacing, layout ───────────────────────────────────── */
  --r-xs:4px; --r-sm:6px; --r:10px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --sidebar-w:232px; --header-h:56px; --content-max:1180px;
  --panel-w:440px;
  /* Side padding of <main>. Components that bleed to its edges (the sticky
     action bar) cancel it with this, so it lives in one place. */
  --gutter:16px;
  /* NOT --nav-h: the sibling app uses that name for a 41px TOP bar, and its
     sub-tab CSS offsets against that name inside a sticky top calc. Porting it onto
     this name would silently break both. This is the BOTTOM tab bar. */
  --tabbar-h:64px; --subnav-h:44px;
  /* Never below 48px. Gloves. */
  --tap-min:48px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);

  /* ── Elevation and motion ─────────────────────────────────────── */
  --shadow-1:0 1px 2px rgba(0,0,0,.40);
  --shadow-2:0 4px 12px rgba(0,0,0,.45);
  --shadow-3:0 12px 28px rgba(0,0,0,.50);
  --shadow-pop:0 16px 40px rgba(0,0,0,.58);
  --shadow-panel:-16px 0 40px rgba(0,0,0,.45);
  --ring:0 0 0 3px var(--accent-t28);
  --dur-instant:80ms; --dur-fast:130ms; --dur:190ms; --dur-slow:280ms; --dur-panel:320ms;
  --ease-out:cubic-bezier(.22,.78,.28,1);
  --ease-in-out:cubic-bezier(.45,0,.25,1);
}