/* css/01-tokens.css — design tokens, :root, reset.
   Split from the index.html <style> block (REFACTOR-PLAN Phase 2). Load order = cascade order; do not reorder. */
/* =====================================================================
   TADWEER · Smart Inspection Vehicle cockpit — wave 5
   Concept: the city is the instrument. A full-bleed 3D map stage carries
   everything; every readout is a glass instrument pinned to a zone so the
   centre (route ribbon + vehicle) stays empty.
   Composition ported from proto/drive.html + proto/proto.css, with the
   client's wave-5 direction: live cameras are the hero, speed demotes to a
   chip in the guidance banner, incidents are numbered on the map and in the
   list, and every incident opens a details sheet with its own evidence.
   Design tokens: design-system/baseer-cockpit/MASTER.md (PROJECT OVERRIDES)
   ===================================================================== */
:root{
  --bg:#070A0B; --s1:#0E1315; --s2:#131A1D; --s3:#182124; --s4:#1E292D;
  --line:#1F2A2E; --line2:#28363B;
  /* --tx2/--tx3 lifted to the prototype's values: both clear 4.5:1 on every
     surface in both themes, and they read through the glass over live tiles. */
  --tx:#EEF4F2; --tx2:#B7C6C2; --tx3:#8FA3A0;
  --acc:#22C882; --acc2:#17935F; --acc-glow:rgba(34,200,130,.35); --acc-dim:rgba(34,200,130,.12);
  --crit:#FF5A5F; --med:#FF9F43; --minor:#FFD166; --info:#4DA3FF;
  /* the ONE glass recipe */
  --glass:rgba(10,15,17,.55); --glass-solid:rgba(10,15,17,.80);
  --hair:rgba(255,255,255,.08); --hair2:rgba(255,255,255,.14);
  --blur:blur(18px) saturate(1.2);
  /* quiet elevation replaces every accent-glow box-shadow. The ONLY surviving
     glows are the speed-arc active band, the gate dot and the route ribbon. */
  --sh:0 6px 16px -8px rgba(0,0,0,.55); --sh-lg:0 14px 34px -16px rgba(0,0,0,.75);
  --r-sm:14px; --r:22px; --r-lg:28px;
  --ease:cubic-bezier(.16,1,.3,1);
  /* the boot -> Start handoff curve (ease-out cubic) */
  --ease-out-cubic:cubic-bezier(.215,.61,.355,1);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans Arabic',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* ---------- ONE TYPE SCALE (wave18) ----------------------------------
     Calibrated for the head unit: 1280x604, read from ~70 cm while driving.
     Every font-size in this file resolves to one of these nine steps; before
     wave18 there were 25 distinct values including 9px, 9.5px and eight
     fractional half-steps, which is what put 300+ text nodes under the
     in-car legibility floor.
       cap  12  eyebrow / caption      — uppercase + tracked only
       meta 13  helper text, mono meta — never a sentence the driver must read
       body 14  body and labels        — the FLOOR for anything read at speed
       md   15  emphasised body
       btn  17  buttons (>=16/600)
       card 17 / card-lg 18            card titles, 700
       ttl  22 / ttl-lg 24             screen titles, 700
       hero 28                         hero numerals, tabular
     Sub-12px is reserved for nothing: there is no step below --fz-cap. */
  --fz-cap:12px; --fz-meta:13px; --fz-body:14px; --fz-md:15px; --fz-md-lg:16px;
  --fz-btn:17px; --fz-card:17px; --fz-card-lg:18px;
  --fz-ttl:22px; --fz-ttl-lg:24px; --fz-hero:28px;
  /* the ink that sits ON an accent fill. Themed alongside --acc in alerts.js
     so the pair always clears 4.5:1 in both day and night. */
  --on-acc:#06201A;
  --header-h:44px; --dock-h:68px;
  /* pass 23 (client): "consider the native elements like top bar and bottom
     bar". The vehicle's browser draws its own chrome around the page, and on a
     head unit with rounded corners / a notch it also reserves an inset. These
     four are the ONLY place env() is read; everything downstream composes them,
     so a browser that reports nothing falls back to 0px and the layout is
     byte-for-byte what it was. Applied in css/22b-safe-viewport.css. */
  --sa-t:env(safe-area-inset-top,0px);
  --sa-r:env(safe-area-inset-right,0px);
  --sa-b:env(safe-area-inset-bottom,0px);
  --sa-l:env(safe-area-inset-left,0px);
  /* the brand rail's own height PLUS whatever the OS reserves above it — what
     anything that starts below the header must offset by. */
  --header-safe:calc(var(--header-h) + var(--sa-t));
  /* wave9: the reserved top-strip height for the non-Drive toast slot (see
     "---------- toast ----------" below) — tall enough for the tallest toast
     (64px, act-on) plus clearance above and below at every breakpoint. */
  --toast-zone:78px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{touch-action:manipulation}
body{overscroll-behavior:none}
/* pass 23: `height:100%` resolves against the INITIAL CONTAINING BLOCK, which on
   a browser that hides its toolbars on scroll is the LARGE viewport — so with
   the vehicle's top/bottom bars showing, the page is taller than the visible
   area, and `overflow:hidden` means the part underneath them can never be
   reached. `100dvh` is the viewport as it is right now. The 100% declaration
   stays first as the fallback for a parser that does not know dvh: it drops the
   second declaration and gets today's behaviour. */
html,body{height:100%;height:100dvh;margin:0;background:var(--bg);color:var(--tx);font-family:var(--font);font-size:var(--fz-md);line-height:1.4;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;margin:0}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
svg.i{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.num,.kpi .val,.vhead .match .v,#clock{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.01em}
.kpi .val{font-weight:700}
.kpi .delta{font-family:var(--font)}
.cap{font-size:var(--fz-cap);letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);font-weight:600}
.ar{font-family:'Noto Sans Arabic',var(--font)}
/* 40-char route summary: sentence case, not a label (wave3-visual §6) */
.cap.routeline{text-transform:none;letter-spacing:.01em;font-size:var(--fz-body);color:var(--tx2)}
[hidden]{display:none!important}

/* the one glass recipe, as a class */
.glass{background:var(--glass);border:1px solid var(--hair);border-radius:var(--r);padding:12px 15px;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}