/* PEMS TSM - THEME TOKENS (Stream K). The single source of every colour, radius, spacing, font and shadow token.
   Loaded first from index.html (before style.css) so the first paint is already themed; a tiny inline script in
   index.html sets html[data-theme] / html[data-mode] / html style="--accent-base" from the user's saved choice.
   Themes (html[data-theme]):  pems (default, PEMS livery, light) | pems-soft | dark | high-contrast | outdoor
   Mode   (html[data-mode]):   light | dark  - legacy selectors key off this; data-theme=light is an alias of pems.
   Accent: set --accent-base (and --on-accent) on <html style> to recolour the whole app; everything else derives.
   Docs: docs/THEME.md. Contrast is checked by scripts/theme-contrast.js (WCAG AA). Status/SLA/priority colours
   (--ok/--warn/--bad/--info, --c-*) are tuned per theme so pills and text stay readable in every theme. */

/* ---------- typeface: Inter (variable, SIL OFL, self-hosted: public/fonts, offline-first, no CDN) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/Inter-Latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/Inter-LatinExt.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:italic;font-weight:100 900;font-display:swap;src:url("/fonts/Inter-Latin-Italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- theme-independent tokens ---------- */
:root{
  --brand-black:#231f20;--brand-orange:#f26522;
  /* accent: --accent-base is the one knob (user accent picker / Owner brand); the rest derive from it */
  --accent-base:#f26522;--on-accent:#231f20;
  --accent:var(--accent-base);
  --accent-hover:color-mix(in srgb,var(--accent-base),white 14%);
  --accent-press:color-mix(in srgb,var(--accent-base),black 14%);
  --accent-soft:color-mix(in srgb,var(--accent-base) 14%,transparent);
  --accent-glow:color-mix(in srgb,var(--accent-base) 45%,transparent);
  /* solid status colours: for filled chips/banners with white text, the same in every theme (AA with #fff) */
  --ok-solid:#15803d;--warn-solid:#a16207;--bad-solid:#b91c1c;--info-solid:#1d4ed8;--on-solid:#ffffff;
  /* spacing / radii */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;
  --r-xs:2px;--r-sm:3px;--r-md:4px;--r-lg:6px;--r-xl:8px;--r-pill:999px;
  /* type */
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --t-xs:11.5px;--t-sm:12.5px;--t-base:14px;--t-md:16px;--t-lg:20px;--t-xl:28px;--t-display:40px;
  --fw-base:400;--fw-med:500;--fw-semi:600;--fw-bold:700;--lh-base:1.5;--track-tight:-.015em;
  --pill-h:22px;--pill-fs:11.5px;
  /* motion */
  --d-fast:120ms;--d-med:200ms;--d-slow:320ms;--ease-out:cubic-bezier(0,0,.15,1);--ease-std:cubic-bezier(.4,0,.15,1);--ease-inout:cubic-bezier(.4,0,.15,1);--d-exit:167ms;--spring:cubic-bezier(.34,1.56,.64,1);
  /* layout + density */
  --side:248px;--top-h:56px;--cell-y:9px;--cell-x:12px;--ctl-h:40px;--focus-w:2px;--line-w:1px;
}

/* ---------- PEMS (default): livery, light, silver neutrals (Stream R: quote-template skin, see 00b-pems-skin.css) ---------- */
:root,:root[data-theme="pems"],:root[data-theme="light"]{
  color-scheme:light;
  --bg:#efefef;--surface-1:#ffffff;--surface-2:#f4f4f4;--surface-3:#e6e6e6;--field:#ffffff;
  --line:#d9d9d9;--line-strong:#9a9a9a;
  --text:#231f20;--text-2:#58595b;--text-3:#636466;
  --accent-text:color-mix(in srgb,var(--accent-base),black 32%);--focus:color-mix(in srgb,var(--accent-base),black 22%);
  --ok:#166534;--warn:#854d0e;--bad:#b91c1c;--info:#1d4ed8;
  --c-violet:#6d28d9;--c-blue:#1d4ed8;--c-orange:#9a3412;--c-pink:#be185d;--c-amber:#854d0e;--c-green:#166534;--c-teal:#115e59;--c-red:#b91c1c;--c-grey:#57534e;
  /* sidebar keeps the charcoal livery */
  --sb-bg:#231f20;--sb-line:rgba(255,255,255,.08);--sb-text:#cfcac8;--sb-text-dim:#8f8784;--sb-head:#7d7573;--sb-hover:rgba(255,255,255,.07);--sb-on:#ffffff;--sb-on-ic:#ff8a50;
  --sh-1:0 1px 0 rgba(35,31,32,.04);--sh-card:0 1px 2px rgba(35,31,32,.05),0 4px 16px rgba(35,31,32,.05);
  --sh-pop:0 10px 30px rgba(35,31,32,.16),0 0 0 1px var(--line-strong);--sh-modal:0 30px 80px rgba(35,31,32,.28),0 0 0 1px var(--line-strong);
  --scrim:rgba(35,31,32,.45);
  /* login scene (branded charcoal splash) */
  --login-bg:#0f0c0d;--login-text:#f4f1ef;--login-text-2:#b9b2af;--login-text-3:#8f8784;--login-card:rgba(27,23,24,.86);--login-line:rgba(255,255,255,.1);--login-field:#110e0f;--login-grid:rgba(255,255,255,.045);
  /* legacy aliases (older ext CSS) */
  --brand:#231f20;--brand2:var(--accent);--card:var(--surface-1);--ink:var(--text);--muted:var(--text-2);--r:var(--r-lg);

  /* skin (quote-template language): charcoal bands, grey table heads with orange rule, silver box borders, orange labels */
  --band-bg:#231f20;--band-text:#ffffff;--band-accent:#ff8a50;--th-bg:#f4f4f4;--th-text:#58595b;--row-line:#e6e6e6;--tint:#fff6ef;--box-line:#d9d9d9;--lbl:var(--accent-text);--sub-bg:#fafafa;
}

/* ---------- PEMS SOFT: lighter, lower-contrast backgrounds, quiet sidebar ---------- */
:root[data-theme="pems-soft"]{
  color-scheme:light;
  --bg:#fbfaf9;--surface-1:#ffffff;--surface-2:#fdfcfb;--surface-3:#f3f0ee;--field:#ffffff;
  --line:rgba(35,31,32,.07);--line-strong:rgba(35,31,32,.2);
  --text:#2e2a2b;--text-2:#625b59;--text-3:#6b6361;
  --accent-text:color-mix(in srgb,var(--accent-base),black 32%);--focus:color-mix(in srgb,var(--accent-base),black 22%);
  --ok:#166534;--warn:#854d0e;--bad:#b91c1c;--info:#1d4ed8;
  --c-violet:#6d28d9;--c-blue:#1d4ed8;--c-orange:#9a3412;--c-pink:#be185d;--c-amber:#854d0e;--c-green:#166534;--c-teal:#115e59;--c-red:#b91c1c;--c-grey:#57534e;
  --sb-bg:#f1eeec;--sb-line:rgba(35,31,32,.08);--sb-text:#3f3a3b;--sb-text-dim:#655e5c;--sb-head:#7a716e;--sb-hover:rgba(35,31,32,.06);--sb-on:#231f20;--sb-on-ic:var(--accent-text);
  --sh-1:none;--sh-card:0 1px 2px rgba(35,31,32,.04);--sh-pop:0 8px 24px rgba(35,31,32,.12),0 0 0 1px var(--line-strong);--sh-modal:0 24px 60px rgba(35,31,32,.2),0 0 0 1px var(--line-strong);
  --scrim:rgba(35,31,32,.35);
  --login-bg:#f1eeec;--login-text:#231f20;--login-text-2:#5c5553;--login-text-3:#655e5c;--login-card:rgba(255,255,255,.9);--login-line:rgba(35,31,32,.1);--login-field:#ffffff;--login-grid:rgba(35,31,32,.05);
  --brand:#231f20;--brand2:var(--accent);--card:var(--surface-1);--ink:var(--text);--muted:var(--text-2);--r:var(--r-lg);

  --band-bg:#3b3637;--band-text:#ffffff;--band-accent:#ff9a66;--th-bg:#f7f7f7;--th-text:#5c5553;--row-line:#e6e6e6;--tint:#fff8f3;--box-line:#dedede;--lbl:var(--accent-text);--sub-bg:#fbfbfb;
}

/* ---------- DARK ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#141112;--surface-1:#1b1718;--surface-2:#231f20;--surface-3:#2d2829;--field:#110e0f;
  --line:rgba(255,255,255,.085);--line-strong:rgba(255,255,255,.16);
  --text:#f4f1ef;--text-2:#b9b2af;--text-3:#9a9290;
  --accent-text:color-mix(in srgb,var(--accent-base),white 28%);--focus:color-mix(in srgb,var(--accent-base),white 45%);
  --ok:#4ade80;--warn:#fbbf24;--bad:#f87171;--info:#60a5fa;
  --c-violet:#a78bfa;--c-blue:#60a5fa;--c-orange:#ff8a50;--c-pink:#f472b6;--c-amber:#fbbf24;--c-green:#4ade80;--c-teal:#2dd4bf;--c-red:#f87171;--c-grey:#a8a29e;
  --sb-bg:#0f0c0d;--sb-line:rgba(255,255,255,.07);--sb-text:#cfcac8;--sb-text-dim:#8f8784;--sb-head:#7d7573;--sb-hover:rgba(255,255,255,.07);--sb-on:#ffffff;--sb-on-ic:var(--accent-text);
  --sh-1:0 1px 0 rgba(0,0,0,.35);--sh-card:0 1px 0 rgba(255,255,255,.03) inset,0 1px 2px rgba(0,0,0,.4);
  --sh-pop:0 10px 30px rgba(0,0,0,.5),0 0 0 1px var(--line-strong);--sh-modal:0 30px 80px rgba(0,0,0,.65),0 0 0 1px var(--line-strong);
  --scrim:rgba(8,6,7,.62);
  --login-bg:#0f0c0d;--login-text:#f4f1ef;--login-text-2:#b9b2af;--login-text-3:#8f8784;--login-card:rgba(27,23,24,.86);--login-line:rgba(255,255,255,.1);--login-field:#110e0f;--login-grid:rgba(255,255,255,.045);
  --brand:var(--surface-2);--brand2:var(--accent);--card:var(--surface-1);--ink:var(--text);--muted:var(--text-2);--r:var(--r-lg);

  --band-bg:#0f0c0d;--band-text:#f4f1ef;--band-accent:#ff8a50;--th-bg:#231f20;--th-text:#b9b2af;--row-line:rgba(255,255,255,.09);--tint:rgba(242,101,34,.14);--box-line:rgba(255,255,255,.14);--lbl:var(--accent-text);--sub-bg:#1f1b1c;
}

/* ---------- HIGH CONTRAST: pure black on white, solid 1px lines, no translucency, thick focus ---------- */
:root[data-theme="high-contrast"]{
  color-scheme:light;
  --ok-solid:#14532d;--warn-solid:#713f12;--bad-solid:#991b1b;--info-solid:#1e3a8a;
  --bg:#ffffff;--surface-1:#ffffff;--surface-2:#ffffff;--surface-3:#f2f2f2;--field:#ffffff;
  --line:#231f20;--line-strong:#000000;--line-w:1px;--focus-w:3px;
  --text:#000000;--text-2:#1f1f1f;--text-3:#333333;
  --accent-text:color-mix(in srgb,var(--accent-base),black 40%);--focus:#000000;--accent-soft:color-mix(in srgb,var(--accent-base) 22%,transparent);
  --ok:#14532d;--warn:#713f12;--bad:#991b1b;--info:#1e3a8a;
  --c-violet:#4c1d95;--c-blue:#1e3a8a;--c-orange:#9a3412;--c-pink:#9d174d;--c-amber:#713f12;--c-green:#14532d;--c-teal:#134e4a;--c-red:#991b1b;--c-grey:#292524;
  --sb-bg:#000000;--sb-line:#ffffff;--sb-text:#ffffff;--sb-text-dim:#e5e5e5;--sb-head:#ffffff;--sb-hover:#333333;--sb-on:#ffffff;--sb-on-ic:#ffb08a;
  --sh-1:none;--sh-card:0 0 0 1px #000;--sh-pop:0 0 0 2px #000;--sh-modal:0 0 0 3px #000;
  --scrim:rgba(0,0,0,.7);
  --fw-base:500;--fw-med:600;--fw-semi:700;--fw-bold:800;
  --login-bg:#ffffff;--login-text:#000000;--login-text-2:#1f1f1f;--login-text-3:#333333;--login-card:#ffffff;--login-line:#000000;--login-field:#ffffff;--login-grid:rgba(0,0,0,.08);
  --brand:#000000;--brand2:var(--accent);--card:var(--surface-1);--ink:var(--text);--muted:var(--text-2);--r:var(--r-md);

  --band-bg:#000000;--band-text:#ffffff;--band-accent:#ffb08a;--th-bg:#f2f2f2;--th-text:#000000;--row-line:#231f20;--tint:#fff1e8;--box-line:#000000;--lbl:var(--accent-text);--sub-bg:#f2f2f2;
}

/* ---------- OUTDOOR: for techs in sunlight - maximum contrast, bigger type, bigger targets ---------- */
:root[data-theme="outdoor"]{
  color-scheme:light;
  --ok-solid:#14532d;--warn-solid:#713f12;--bad-solid:#991b1b;--info-solid:#1e3a8a;
  --bg:#ffffff;--surface-1:#ffffff;--surface-2:#ffffff;--surface-3:#ededed;--field:#ffffff;
  --line:#231f20;--line-strong:#000000;--line-w:2px;--focus-w:4px;
  --text:#000000;--text-2:#1a1a1a;--text-3:#262626;
  --accent-text:color-mix(in srgb,var(--accent-base),black 42%);--focus:#000000;--accent-soft:color-mix(in srgb,var(--accent-base) 26%,transparent);
  --ok:#14532d;--warn:#713f12;--bad:#991b1b;--info:#1e3a8a;
  --c-violet:#4c1d95;--c-blue:#1e3a8a;--c-orange:#9a3412;--c-pink:#9d174d;--c-amber:#713f12;--c-green:#14532d;--c-teal:#134e4a;--c-red:#991b1b;--c-grey:#292524;
  --sb-bg:#000000;--sb-line:#ffffff;--sb-text:#ffffff;--sb-text-dim:#f0f0f0;--sb-head:#ffffff;--sb-hover:#333333;--sb-on:#ffffff;--sb-on-ic:#ffb08a;
  --sh-1:none;--sh-card:0 0 0 2px #000;--sh-pop:0 0 0 3px #000;--sh-modal:0 0 0 4px #000;
  --scrim:rgba(0,0,0,.75);
  --t-xs:13px;--t-sm:14px;--t-base:16px;--t-md:18px;--t-lg:22px;--t-xl:30px;--lh-base:1.45;
  --fw-base:500;--fw-med:600;--fw-semi:700;--fw-bold:800;
  --pill-h:28px;--pill-fs:13.5px;--cell-y:12px;--cell-x:14px;--ctl-h:48px;--top-h:60px;
  --login-bg:#ffffff;--login-text:#000000;--login-text-2:#1a1a1a;--login-text-3:#262626;--login-card:#ffffff;--login-line:#000000;--login-field:#ffffff;--login-grid:rgba(0,0,0,.08);
  --brand:#000000;--brand2:var(--accent);--card:var(--surface-1);--ink:var(--text);--muted:var(--text-2);--r:var(--r-md);

  --band-bg:#000000;--band-text:#ffffff;--band-accent:#ffb08a;--th-bg:#ededed;--th-text:#000000;--row-line:#231f20;--tint:#fff1e8;--box-line:#000000;--lbl:var(--accent-text);--sub-bg:#ededed;
}

/* ---------- density (user choice; outdoor already sets its own) ---------- */
:root[data-density="compact"]:not([data-theme="outdoor"]){--cell-y:4px;--cell-x:10px;--ctl-h:32px;--t-base:13px}
:root[data-density="roomy"]:not([data-theme="outdoor"]){--cell-y:14px;--cell-x:14px;--ctl-h:44px}

/* ---------- theme-wide behaviours ---------- */
:root[data-theme="high-contrast"] *,:root[data-theme="outdoor"] *{text-shadow:none!important}
:root[data-theme="high-contrast"] .top,:root[data-theme="outdoor"] .top{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}
:root[data-theme="high-contrast"] .pill,:root[data-theme="outdoor"] .pill{box-shadow:inset 0 0 0 1px currentColor;background:color-mix(in srgb,var(--c) 10%,#fff)}
:root[data-theme="outdoor"] .btn,:root[data-theme="outdoor"] button.btn{min-height:var(--ctl-h);font-weight:var(--fw-semi)}
:root[data-theme="outdoor"] input,:root[data-theme="outdoor"] select,:root[data-theme="outdoor"] textarea{font-size:var(--t-base)}
:root[data-mode="light"] .th-hero,:root[data-mode="light"] .th-sync{border-color:#231f20}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}