/* ==========================================================================
   Design tokens — convoy-transactions.org web panel
   --------------------------------------------------------------------------
   Single source of truth for the panel's visual language. Canonical look is
   the TEAL system (originally from transactions.css). This file is
   VARIABLES-ONLY (no element/class selectors) so it is safe to <link> into any
   page without colliding with that page's own class names.

   Two naming schemes are bridged here so existing stylesheets keep resolving:
     transactions.css names : --bg --panel --panel-2 --border --text --muted …
     admin pages' names     : --surface --ink --line --faint --navy --ok …
   Aliases reference their base token (e.g. --surface:var(--panel)), so a single
   html.dark override of the base tokens flows through to the aliases too.

   Light is the default. Only the Transactions page wires the html.dark toggle;
   the block is kept here so that page keeps working when it links tokens.css.
   ========================================================================== */
:root{
  /* --- Surfaces / lines / text (canonical = transactions.css) --- */
  --bg:#eef2f7;
  --panel:#ffffff;
  --panel-2:#f8fafc;
  --panel-3:#f1f5f9;
  --border:#e6e9f2;
  --line-soft:#eef2f7;
  --text:#1e293b;
  --muted:#94a3b8;
  --head-bg:#f8fafc;
  --head-text:#64748b;

  /* Aliases used by the admin pages (shipment360 / cash_cost / fuel_report) */
  --surface:var(--panel);
  --ink:var(--text);
  --line:var(--border);
  --faint:var(--muted);

  /* --- Accent: teal --- */
  --accent:#0f766e;
  --accent-soft:#ccfbf1;
  --accent-strong:#0b5c56;
  --accent-ring:rgba(15,118,110,.16);
  --row-hover:#e6f7f4;
  --zebra:#f1f5f9;

  /* --- Neutral dark chrome (page headers) — pairs with teal --- */
  --navy:#0f1f3a;
  --navy-2:#1b3358;

  /* --- Semantic (aligned with the admin pages already in use) --- */
  --ok:#16a34a;      --ok-soft:#e7f7ee;    --ok-line:#b7e6c9;
  --warn:#a9740c;    --warn-soft:#fffaf0;  --warn-line:#f2e0b8;
  --danger:#b3361f;  --danger-soft:#fdecea;--danger-line:#f3c4bb;

  /* --- Shape / shadow / motion --- */
  --radius:12px;
  --radius-sm:9px;
  --radius-lg:16px;
  --shadow:0 1px 2px rgba(16,32,58,.06),0 6px 18px rgba(16,32,58,.08);
  --shadow-lg:0 24px 60px rgba(8,18,36,.30);

  /* --- Type --- */
  --font:'Segoe UI',Tahoma,Geneva,Verdana,-apple-system,BlinkMacSystemFont,Roboto,system-ui,sans-serif;

  /* --- Product palette (one canonical set = transactions.css) --- */
  --diesel:#22c55e;
  --adblue:#3b82f6;
  --cng:#eab308;
  --hpd:#f97316;
  --vignette:#ef4444;
  --chip-diesel-bg:#dcfce7;   --chip-diesel-fg:#15803d;
  --chip-adblue-bg:#dbeafe;   --chip-adblue-fg:#1d4ed8;
  --chip-vignette-bg:#fee2e2; --chip-vignette-fg:#b91c1c;
  --chip-hpd-bg:#ffedd5;      --chip-hpd-fg:#c2410c;
  --chip-cng-bg:#fef9c3;      --chip-cng-fg:#a16207;
  --chip-default-bg:#f1f5f9;  --chip-default-fg:#475569;

  /* --- Back-compat aliases (names used by style.css / older inline blocks) --- */
  --primary-color:var(--accent);
  --primary-dark:var(--accent-strong);
  --primary-light:#5ea39c;
  --secondary-color:var(--hpd);
  --background-color:var(--bg);
  --text-color:var(--text);
  --border-color:var(--border);
  --success-color:var(--ok);
  --warning-color:var(--warn);
  --danger-color:var(--danger);
  --box-shadow:var(--shadow);
  --border-radius:var(--radius);
}

/* Dark theme — only the Transactions page toggles html.dark (via localStorage).
   Other pages never add the class, so they stay light (light-only unify). */
html.dark{
  --bg:#0b1220;
  --panel:#0f172a;
  --panel-2:#1e293b;
  --panel-3:#131c2e;
  --border:#1e293b;
  --line-soft:#131c2e;
  --text:#e2e8f0;
  --muted:#64748b;
  --head-bg:#1e293b;
  --head-text:#94a3b8;

  --accent:#5eead4;
  --accent-soft:#134e4a;
  --accent-ring:rgba(94,234,212,.18);
  --row-hover:#1b2b48;
  --zebra:#131c2e;

  --shadow:0 8px 32px rgba(0,0,0,.5);

  --chip-diesel-bg:#064e3b;   --chip-diesel-fg:#6ee7b7;
  --chip-adblue-bg:#1e3a5f;   --chip-adblue-fg:#93c5fd;
  --chip-vignette-bg:#4c1d1d; --chip-vignette-fg:#fca5a5;
  --chip-hpd-bg:#4a2810;      --chip-hpd-fg:#fdba74;
  --chip-cng-bg:#422006;      --chip-cng-fg:#fde047;
  --chip-default-bg:#334155;  --chip-default-fg:#cbd5e1;
  --cng:#facc15;
  --hpd:#fb923c;
}