/* ==========================================================================
   Route Plan — Design Tokens
   Colour system, type scale, spacing, elevation, motion. Themed (light/dark).
   ========================================================================== */

:root{
  /* Brand — the two lanes. Fixed across themes so pins/SVG stay consistent. */
  --route:#F26B21;        /* Call Plan — sales   */
  --route-deep:#DD5C15;
  --deliver:#20718C;      /* Delivery — trucks   */
  --deliver-deep:#175A70;
  --visited:#2E9E63;      /* checked in          */
  --highway:#EFC03C;

  /* Type */
  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --data:'IBM Plex Mono',ui-monospace,monospace;
  --khmer:'Kantumruy Pro','Noto Sans Khmer',sans-serif;

  /* Fluid type scale */
  --fs-display:clamp(38px,5vw,66px);
  --fs-h1:clamp(34px,4.4vw,58px);
  --fs-h2:clamp(28px,3.3vw,44px);
  --fs-h3:clamp(20px,1.6vw,26px);
  --fs-lede:clamp(17px,1.35vw,20px);
  --fs-body:17px;
  --fs-sm:15px;
  --fs-xs:13px;
  --fs-mono:12px;

  /* Spacing rhythm */
  --sp-1:6px; --sp-2:12px; --sp-3:18px; --sp-4:26px; --sp-5:40px;
  --sp-6:60px; --sp-7:88px; --sp-8:120px;
  --gutter:28px; --maxw:1200px; --maxw-narrow:840px;

  /* Radii */
  --r-xs:6px; --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:24px; --r-pill:999px;

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.16s; --t:.28s; --t-slow:.6s;
}

/* -------------------------------------------------------------------------
   LIGHT THEME (default) — "paper & grid" studio aesthetic
   ------------------------------------------------------------------------- */
:root, [data-theme="light"]{
  --bg:#EDEFEA;
  --bg-2:#E3E6DF;
  --bg-3:#F4F6F1;
  --surface:#FBFCFA;
  --surface-2:#F4F6F1;

  --ink:#15181C;
  --ink-80:rgba(21,24,28,.80);
  --ink-70:rgba(21,24,28,.70);
  --ink-60:rgba(21,24,28,.62);
  --ink-45:rgba(21,24,28,.45);
  --ink-35:rgba(21,24,28,.35);
  --ink-14:rgba(21,24,28,.14);
  --ink-12:rgba(21,24,28,.12);
  --ink-08:rgba(21,24,28,.07);

  --line:rgba(21,24,28,.12);
  --line-soft:rgba(21,24,28,.07);
  --grid-line:rgba(21,24,28,.045);
  --glass:rgba(237,239,234,.72);
  --glass-strong:rgba(237,239,234,.88);

  --sh-1:0 1px 2px rgba(21,24,28,.05),0 1px 1px rgba(21,24,28,.04);
  --sh-2:0 4px 10px -3px rgba(21,24,28,.10),0 2px 4px -2px rgba(21,24,28,.06);
  --sh-3:0 16px 30px -12px rgba(21,24,28,.18),0 6px 12px -6px rgba(21,24,28,.10);
  --sh-4:0 34px 60px -22px rgba(21,24,28,.34),0 14px 26px -14px rgba(21,24,28,.16);

  --glow-a:rgba(242,107,33,.10);
  --glow-b:rgba(32,113,140,.09);
  --grain-opacity:.035;
  --grain-blend:multiply;
}

/* -------------------------------------------------------------------------
   DARK THEME — "operations control room"
   ------------------------------------------------------------------------- */
[data-theme="dark"]{
  --bg:#0C0F14;
  --bg-2:#11151C;
  --bg-3:#151A22;
  --surface:#141922;
  --surface-2:#1A2029;

  --ink:#EDEFEA;
  --ink-80:rgba(237,239,234,.82);
  --ink-70:rgba(237,239,234,.72);
  --ink-60:rgba(237,239,234,.60);
  --ink-45:rgba(237,239,234,.46);
  --ink-35:rgba(237,239,234,.34);
  --ink-14:rgba(237,239,234,.16);
  --ink-12:rgba(237,239,234,.13);
  --ink-08:rgba(237,239,234,.08);

  --line:rgba(237,239,234,.13);
  --line-soft:rgba(237,239,234,.08);
  --grid-line:rgba(237,239,234,.035);
  --glass:rgba(14,17,22,.66);
  --glass-strong:rgba(14,17,22,.86);

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 12px -3px rgba(0,0,0,.5),0 2px 4px -2px rgba(0,0,0,.4);
  --sh-3:0 18px 34px -14px rgba(0,0,0,.6),0 6px 12px -6px rgba(0,0,0,.5);
  --sh-4:0 40px 70px -24px rgba(0,0,0,.75),0 16px 30px -14px rgba(0,0,0,.6);

  --glow-a:rgba(242,107,33,.16);
  --glow-b:rgba(32,113,140,.16);
  --grain-opacity:.05;
  --grain-blend:overlay;
}

[data-theme="dark"] .btn-primary{--_shadow:0 8px 22px -10px rgba(242,107,33,.7)}