/* Scotia Plot Tracker — design tokens (v1).
   ------------------------------------------------------------------
   Loaded BEFORE each page's inline <style> (as <link rel="stylesheet"
   href="/theme.css?v=1"> near the top of <head>) so page-specific rules
   still win, but the shared token VALUES live here in one place. Pages
   keep their existing var names and just consume them; a page whose local
   :root defined the same token deletes its copy so this one applies.

   Dark (ops-room) is the default. [data-theme="light"] overrides token
   VALUES only — nothing structural. The nav appearance toggle (nav.js)
   sets data-theme and persists it per user.

   Colour discipline:
     • Saturated colour is reserved for STATUS/SEVERITY (red/amber/green/info).
     • ONE brand accent — Scotia blue #27348C (sampled from scotia-logo.png).
     • Departments are MUTED tints — borders/dots only, never fills.
     • Crew/van colours come from the DB (crews.color) and stay vivid — real vans.

   Cloudflare force-caches .css 4h → bump ?v=N on every page's link when this changes.
   ------------------------------------------------------------------ */
:root{
  /* Surfaces */
  --bg:#0b0d14; --surface:#13151f; --surface2:#191c2a; --surface3:#1f2235;
  --border:#252940; --border2:#2e3350;
  /* github-family surface aliases (cs-live / live-fleet / customercare) */
  --bg2:#0d1117;

  /* Text — muted bumped for WCAG AA on --bg (old #5a6080 was 3.08:1, failed) */
  --text:#e8eaf2; --muted2:#9aa2bd; --muted:#868ea9;
  --text-muted:#9aa2bd;

  /* Brand — the ONE accent. --brand = solid fill (use --brand-ink for text on it);
     --accent = accent text/links/KPI numbers/focus on THIS theme. */
  --brand:#27348c; --brand-ink:#ffffff;
  --accent:#7c8be0; --accent2:#9aa5e8;

  /* Severity — the only saturated colours. */
  --ok:#3db87a;     --green:#3db87a;
  --warn:#d9a441;   --amber:#d9a441;
  --danger:#e05252; --red:#e05252; --dark-red:#e0685f;
  --info:#58a6ff;   --blue:#58a6ff;
  /* Severity chip surfaces — for pages that fill a fixed tint bg (SLA chips).
     Text = the matching severity token; both are AA-checked on each theme. */
  --low:#e05252; --low-bg:#2e0f0f; --warn-bg:#2a1f00; --ok-bg:#14301f;

  /* Department TINTS (~30% sat) — left-borders + dots only, never fills. */
  --dept-estimate:#b98a5e; --dept-production:#5e93b9; --dept-installation:#8a7ec4; --dept-care:#5eb98f;
  /* in-page dept aliases */
  --est:#b98a5e; --prod:#5e93b9; --inst:#8a7ec4; --care:#5eb98f;
  --dir:#c47ea8; --sys:#c9b96b; --agent:#a06fd0;

  /* Common semantic aliases shared across pages (so they migrate to theme.css cleanly). */
  --good:#3db87a; --bad:#e05252; --scotia:#27348c; --text-light:#e8eaf2;
  --grey-mid:#868ea9; --grey-bg:#191c2a;
  --good-bg:#14301f; --green-bg:#14301f; --bad-bg:#2e0f0f; --red-bg:#2e0f0f; --amber-bg:#2a1f00;

  --radius:12px;
}

/* ── Light theme — token values only ── */
:root[data-theme="light"]{
  --bg:#f4f6fa; --surface:#ffffff; --surface2:#eef1f6; --surface3:#e6eaf2;
  --border:#d7dde7; --border2:#c9d1de; --bg2:#f4f6fa;

  --text:#141a26; --muted2:#4a5468; --muted:#5c6578; --text-muted:#4a5468;

  --brand:#27348c; --brand-ink:#ffffff;
  --accent:#27348c; --accent2:#3a49ad;

  /* Severity darkened for AA on white — verified as chip TEXT on its own pale tint
     (color-mix 16–20%): critical 5.7, warning 5.9, info 6.3, ok 5.4 — all ≥4.5. */
  --ok:#14623a;     --green:#14623a;
  --warn:#6e4708;   --amber:#6e4708;
  --danger:#9b1c1c; --red:#9b1c1c; --dark-red:#8f1a1a;
  --info:#1a4699;   --blue:#1a4699;
  /* Fixed-tint SLA chip surfaces — pale bg + the dark ink above (all ≥6:1). */
  --low:#9b1c1c; --low-bg:#fbe3e3; --warn-bg:#f7ecd6; --ok-bg:#dcefe4;

  --good:#14623a; --bad:#9b1c1c; --scotia:#27348c; --text-light:#141a26;
  --grey-mid:#5c6578; --grey-bg:#eef1f6;
  --good-bg:#dcefe4; --green-bg:#dcefe4; --bad-bg:#fbe3e3; --red-bg:#fbe3e3; --amber-bg:#f7ecd6;

  --dept-estimate:#9a6f3f; --dept-production:#3f6f95; --dept-installation:#6a5cae; --dept-care:#3f9670;
  --est:#9a6f3f; --prod:#3f6f95; --inst:#6a5cae; --care:#3f9670;
  --dir:#a05a86; --sys:#8a7a2b; --agent:#7a4fb0;
}

/* ── Inline icon (Lucide sprite) — stroke set on the host so it survives an
   external <use>. Sizes to 1em; colour follows currentColor. ── */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic-lg{width:20px;height:20px}
.ic-xl{width:24px;height:24px}

/* ── One empty-state pattern — replaces the giant dashed boxes ── */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:28px 20px;color:var(--muted);}
.empty-state .es-icon{width:24px;height:24px;opacity:.65;display:block;}
.empty-state p{font-size:14px;margin:0;line-height:1.4;}
.empty-state a{font-size:13px;color:var(--accent);text-decoration:none;font-weight:600;}
.empty-state a:hover{text-decoration:underline;}

/* ── One quiet role badge — neutral surface + department dot + sentence case ── */
.role-badge2{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:3px 9px;border-radius:6px;background:var(--surface2);border:1px solid var(--border);color:var(--text);white-space:nowrap;letter-spacing:0;text-transform:none;}
.role-badge2 .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0;}
