/* =====================================================================
   CONTROWARE KPI Cockpit — design tokens
   The one source of colour, type, spacing, radius, shadow and motion.
   Loaded before app.css by the legacy app (index.html, sso-done.html) and
   imported by the React app (web/src/styles/global.css). Components use
   var(--token) only; no colour or duration is written anywhere else.
   ===================================================================== */

/* Light (default) */
:root{
  color-scheme:light;
  /* Values pulled from Figma "Design System & UI" (file Uk59ravezYM7HmfoBylnGw),
     Colors/Light 4:2 and Tokens 5:2 — not eyeballed from screenshots. */
  --bg:#EEF1F4; --rail:#F5F7F9; --surface:#FFFFFF; --surface-2:#F5F7F9; --surface-3:#EAEEF2;
  /* --muted is darker than Figma's #8A95A3 (2.7:1 on --bg): captions, hints and
     nav section titles are small text and need 4.5:1 on every surface (4.52 on
     --surface-3). Same value as the phone app (mobile/lib/design/tokens.dart). */
  --ink:#111820; --ink-2:#55606C; --muted:#626D7A; --line:#DDE3E9; --line-2:#C3CCD5;
  --ink-inverse:#FFFFFF; --link:#0E7FA6; --focus:#0E7FA6;
  /* Brand red is the Primary button and the active nav item, nothing else.
     Status red is --crit. The two never merge. */
  --brand:#C00000; --brand-2:#A30000; --brand-ink:#FFFFFF; --brand-soft:#FBECEC;
  --accent:#0E7FA6; --accent-2:#0A6685; --accent-ink:#FFFFFF; --accent-soft:#E6F2F6;
  --good:#1A8F5A; --good-text:#136B45; --good-bg:#E3F3EA;
  --warn:#B87A00; --warn-text:#7A5A00; --warn-bg:#FBF1DA;
  --crit:#D93025; --crit-text:#A61B12; --crit-bg:#FCE8E6;
  --info:#0E7FA6; --info-bg:#E6F2F6;
  --none:#98A2B0; --none-bg:#EEF1F4;
  --s1:#0E7FA6; --s2:#C1660E; --s3:#7C3AED; --s4:#8A95A3; --s3-soft:#EFE7FD;
  --grid:rgba(17,24,32,.07); --axis:#C3CCD5; --target-line:#55606C; --forecast-band:rgba(124,58,237,.12);
  --overlay:rgba(17,24,32,.45);
  /* Theme-invariant dark surfaces: the decision band and the KPI map canvas
     read the same in both themes, so they live here only. */
  --band:#0F1720; --band-2:#17222E; --band-ink:#F2F5F8; --band-ink-2:#A8B3BF; --band-line:rgba(255,255,255,.12);
  --band-glass:rgba(255,255,255,.08); --band-glass-2:rgba(255,255,255,.16); --band-track:rgba(255,255,255,.14);
  --map-dept:#3FA8CC; --map-obj:#9B6BF2; --map-kpi:#FF5C52; --map-meas:#E8973A; --map-result:#2ECC8F;
  --map-ink:#F2F5F8; --map-ink-2:#8A95A3;
  --hero-a:#0F1720; --hero-b:#17222E; --hero-ink:#F2F5F8; --hero-ink-2:#A8B3BF; --hero-line:rgba(255,255,255,.12);
  /* Elevation 0-3 from Figma 5:2. Flat is the default; shadow only floats. */
  --shadow-1:0 1px 2px rgba(17,24,32,.06);
  --shadow-2:0 4px 12px rgba(17,24,32,.10),0 1px 2px rgba(17,24,32,.06);
  --shadow-3:0 16px 40px rgba(17,24,32,.18),0 2px 6px rgba(17,24,32,.08);
  --r-xs:4px; --r-sm:6px; --r:8px; --r-lg:12px; --r-xl:16px; --r-full:999px;
  --font-ui:"Titillium Web",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --rail-w:240px; --top-h:56px;
  --fs-display:44px; --fs-display-l:32px; --fs-h1:26px; --fs-h2:20px; --fs-h3:16px;
  --fs-value:25px; --fs-body:14px; --fs-label:12px; --fs-caption:11px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --sp-10:40px; --sp-12:48px; --sp-16:64px;
}

/* Dark */
:root[data-theme="dark"], :root[data-theme="dark"] body{color-scheme:dark}
:root[data-theme="dark"]{
  /* Figma Colors/Dark 4:273. */
  --bg:#0B0F14; --rail:#0B0F14; --surface:#131A22; --surface-2:#1A222C; --surface-3:#212B36;
  /* --muted: 4.5:1 on every dark surface (Figma's #6C7885 was 3.2:1 on --surface-3). */
  --ink:#EEF1F4; --ink-2:#98A2B0; --muted:#8592A0; --line:#263040; --line-2:#35414F;
  --ink-inverse:#111820; --link:#3FC0E8; --focus:#3FC0E8;
  --brand:#FF5C52; --brand-2:#FF7A72; --brand-ink:#1A0402; --brand-soft:#3A1A18;
  --accent:#3FC0E8; --accent-2:#6DD1F0; --accent-ink:#06171D; --accent-soft:#14303A;
  --good:#34C784; --good-text:#7FE3B4; --good-bg:#123326;
  --warn:#E8AE2E; --warn-text:#F5C75A; --warn-bg:#33290F;
  --crit:#EF5350; --crit-text:#FF8A8F; --crit-bg:#3A1517;
  --info:#3FC0E8; --info-bg:#14303A;
  --none:#6C7885; --none-bg:#1A222C;
  --s1:#3FC0E8; --s2:#F0924D; --s3:#B48CFF; --s4:#6C7885; --s3-soft:#2A1A4D;
  --grid:rgba(230,235,240,.07); --axis:#35414F; --target-line:#98A2B0; --forecast-band:rgba(180,140,255,.16);
  --overlay:rgba(0,0,0,.62);
  --band:#0F1720; --band-2:#17222E; --band-ink:#F2F5F8; --band-ink-2:#A8B3BF; --band-line:rgba(255,255,255,.12);
  --band-glass:rgba(255,255,255,.08); --band-glass-2:rgba(255,255,255,.16); --band-track:rgba(255,255,255,.14);
  /* Figma ships one Elevation set, tuned for a light ground — those alphas are
     invisible on #0B0F14, so dark keeps black-based shadows at the same three
     steps. Noted as a deviation in docs/UI_IMPLEMENTATION_PLAN.md. */
  --shadow-1:0 1px 2px rgba(0,0,0,.40);
  --shadow-2:0 4px 12px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.35);
  --shadow-3:0 16px 40px rgba(0,0,0,.60),0 2px 6px rgba(0,0,0,.40);
}

/* Arabic type: Cairo for headings, Noto Sans Arabic for body (Figma page 02) */
html[lang="ar"]{--font-ui:"Cairo","IBM Plex Sans Arabic",system-ui,sans-serif;--font-body:"Noto Sans Arabic","IBM Plex Sans Arabic","Cairo",system-ui,sans-serif}

/* Motion: easing curves and durations (Figma developer handoff, table 3).
   Each has a prefers-reduced-motion fallback where it is used. */
:root{--ease-out:cubic-bezier(0.22,1,0.36,1);--ease-in:cubic-bezier(0.550,0.055,0.675,0.190);--ease-toggle:cubic-bezier(0.4,0,0.2,1);
  --ease:var(--ease-toggle);--dur-micro:180ms;--dur-page:320ms;
  /* Motion durations — Figma developer handoff, table 3. Each has a
     prefers-reduced-motion fallback where it is used. */
  --dur-fast:var(--dur-micro); --dur-card:var(--dur-micro); --dur-tab:200ms; --dur-overlay:var(--dur-page); --dur-pop:150ms}