/* ===================================================================
   wideopenplain — THEME (design system v1)
   One system, two surfaces. Tokens live on :root and flip with
   data-theme ("light" | "dark"); components read the tokens, never
   raw hex. Additive & opt-in: including this file changes nothing until
   an element uses a token or a .wop-* class. Set the mode with
   document.documentElement.dataset.theme and persist to localStorage
   ("wop-theme"); honour prefers-color-scheme on first load.

   Brand: warm paper + near-black ink + amber #FFB020 (the accent that
   already runs through the product — CTA, active nav, FACILITIES config).
   One grotesque, an 8px rhythm, gentle radii.
   =================================================================== */

:root, :root[data-theme="light"]{
  /* surfaces & ink */
  --wop-bg:#FBFAF7; --wop-surface:#FFFFFF; --wop-surface-2:#F3F1EB; --wop-surface-3:#EAE7DE;
  --wop-ink:#1B1A16; --wop-ink-2:#57564E; --wop-ink-3:#8C8A80;
  --wop-line:#E4E1D7; --wop-line-2:#D2CEC2;
  /* accent + state */
  --wop-amber:#FFB020; --wop-amber-deep:#E7920A; --wop-amber-ink:#8A5D00; --wop-amber-soft:#F6E4C0;
  --wop-green:#3F7A55; --wop-red:#B4462F; --wop-blue:#2F6DB0;
  /* categorical (route identity), light-surface tuned */
  /* audited categorical route set (Okabe-Ito derived, light-tuned) */
  --wop-r1:#0B5FA0; --wop-r2:#C1471F; --wop-r3:#147A5B; --wop-r4:#A6357A; --wop-r5:#B8860B; --wop-r6:#4A4E57;
  --wop-shadow:0 30px 60px -46px rgba(0,0,0,.5);
}
:root[data-theme="dark"]{
  --wop-bg:#171719; --wop-surface:#1F2023; --wop-surface-2:#26272B; --wop-surface-3:#2E2F34;
  --wop-ink:#ECEBE6; --wop-ink-2:#A6A59D; --wop-ink-3:#6E6E68;
  --wop-line:#33343A; --wop-line-2:#3E4046;
  --wop-amber:#FFB020; --wop-amber-deep:#FFC24A; --wop-amber-ink:#FFC24A; --wop-amber-soft:#3A2E12;
  --wop-green:#5DD08C; --wop-red:#E88A72; --wop-blue:#5AA6E6;
  --wop-r1:#5AA6E6; --wop-r2:#EA9256; --wop-r3:#45C2A2; --wop-r4:#B197EA; --wop-r5:#9FC24A; --wop-r6:#E87BA4;
  --wop-shadow:0 30px 60px -40px rgba(0,0,0,.72);
}
/* let native form controls / scrollbars match the surface */
:root[data-theme="dark"]{ color-scheme:dark; }
:root[data-theme="light"]{ color-scheme:light; }

:root{
  --wop-sans:'Helvetica Neue',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --wop-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  /* spacing (8px rhythm) */
  --wop-s1:8px; --wop-s2:16px; --wop-s3:24px; --wop-s4:40px; --wop-s5:64px; --wop-s6:96px;
  /* radius */
  --wop-r-ctl:8px; --wop-r-card:12px; --wop-r-pill:999px;
}

/* ---------- helpers ---------- */
.wop-mono{font-family:var(--wop-mono)}
.wop-tnum{font-variant-numeric:tabular-nums}
.wop-label{font-family:var(--wop-sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--wop-ink-3)}

/* ---------- buttons ---------- */
.wop-btn{font-family:var(--wop-sans);font-size:14px;font-weight:600;letter-spacing:-.01em;
  padding:11px 18px;border-radius:var(--wop-r-ctl);border:1px solid var(--wop-line-2);
  color:var(--wop-ink);background:transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .12s}
.wop-btn:hover{border-color:var(--wop-ink)}
.wop-btn:active{transform:translateY(1px)}
.wop-btn:focus-visible{outline:2px solid var(--wop-amber);outline-offset:2px}
.wop-btn--solid{background:var(--wop-ink);color:var(--wop-bg);border-color:var(--wop-ink)}
.wop-btn--solid:hover{opacity:.88}
.wop-btn--amber{background:var(--wop-amber);color:#1B1A16;border-color:var(--wop-amber);font-weight:700}
.wop-btn--amber:hover{background:var(--wop-amber-deep)}
.wop-btn--pill{border-radius:var(--wop-r-pill)}
.wop-btn--ghost{border-color:transparent;color:var(--wop-ink-2)}
.wop-btn--ghost:hover{color:var(--wop-ink);border-color:transparent}

/* ---------- nav ---------- */
.wop-nav{display:flex;align-items:center;gap:var(--wop-s3);height:56px;padding:0 var(--wop-s3);
  background:var(--wop-surface);border-bottom:1px solid var(--wop-line)}
.wop-nav a{font-family:var(--wop-sans);font-size:13px;color:var(--wop-ink-3);text-decoration:none;padding:18px 0;position:relative}
.wop-nav a.is-active{color:var(--wop-ink);font-weight:600}
.wop-nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--wop-amber)}
.wop-brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--wop-sans);font-weight:800;letter-spacing:-.02em;font-size:15px;color:var(--wop-ink)}

/* ---------- theme toggle ---------- */
.wop-toggle{display:inline-flex;border:1px solid var(--wop-line-2);border-radius:var(--wop-r-pill);overflow:hidden;background:var(--wop-bg)}
.wop-toggle button{display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;color:var(--wop-ink-3);
  font-family:var(--wop-sans);font-size:11.5px;font-weight:600;padding:7px 13px;cursor:pointer;transition:color .15s,background .15s}
.wop-toggle button.is-active{color:var(--wop-ink);background:var(--wop-surface-2)}
.wop-toggle button.is-active svg{color:var(--wop-amber-ink)}
.wop-toggle svg{display:block}

/* ---------- surfaces ---------- */
.wop-card{border:1px solid var(--wop-line);border-radius:var(--wop-r-card);background:var(--wop-surface);overflow:hidden}
.wop-card__head{padding:14px 16px;border-bottom:1px solid var(--wop-line);font-family:var(--wop-sans);font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:space-between}
.wop-card__body{padding:16px}

/* ---------- kpi ---------- */
.wop-kpi__k{font-family:var(--wop-sans);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--wop-ink-3)}
.wop-kpi__v{font-family:var(--wop-sans);font-weight:800;font-size:34px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05;margin-top:6px;color:var(--wop-ink)}
.wop-kpi__v--amber{color:var(--wop-amber-ink)}
.wop-kpi__d{font-family:var(--wop-sans);font-size:12px;color:var(--wop-green);margin-top:2px;font-variant-numeric:tabular-nums}

/* ---------- tags & state ---------- */
.wop-tag{font-family:var(--wop-sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--wop-ink-2);border:1px solid var(--wop-line-2);padding:4px 9px;border-radius:6px}
.wop-tag--amber{color:var(--wop-amber-ink);background:var(--wop-amber-soft);border-color:transparent}
.wop-stat{font-family:var(--wop-sans);font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.wop-stat::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.wop-stat--ok{color:var(--wop-green)} .wop-stat--warn{color:var(--wop-amber-ink)} .wop-stat--crit{color:var(--wop-red)}

/* ---------- input ---------- */
.wop-input{font-family:var(--wop-sans);font-size:14px;padding:11px 14px;border:1px solid var(--wop-line-2);
  border-radius:var(--wop-r-ctl);background:var(--wop-surface);color:var(--wop-ink);width:100%}
.wop-input:focus{outline:none;border-color:var(--wop-amber);box-shadow:0 0 0 3px var(--wop-amber-soft)}

/* ---------- table ---------- */
.wop-table{width:100%;border-collapse:collapse;font-family:var(--wop-sans);font-size:13px}
.wop-table th{text-align:left;font-weight:600;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--wop-ink-3);
  padding:0 12px 9px 0;border-bottom:1px solid var(--wop-line-2)}
.wop-table td{padding:9px 12px 9px 0;border-bottom:1px solid var(--wop-line);color:var(--wop-ink-2);font-variant-numeric:tabular-nums}
.wop-table tr:last-child td{border-bottom:none}
.wop-table td.is-ref{color:var(--wop-ink);font-weight:600}

@media(prefers-reduced-motion:reduce){ .wop-btn{transition:none} }


/* =====================================================================
   APP TOKENS (D-0) — the operational app's theme contract, published here
   as the canonical reference. wideopenplain_core.css carries a mirrored
   copy for load-order safety; keep the two in sync (edit here first).
   Rules: no ad-hoc hex colours on app screens — consume these tokens.
   JS-drawn charts/scenes read them via wopTok('--name', fallback)
   (core.js) or a local _wopTok helper (standalone screen JS).
   ===================================================================== */
:root,:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#14181D; --panel:#1B2128; --panel2:#20272F; --panel3:#12161A;
  --line:#2A323B; --line2:#333A42; --hover:#28313B; --band:#171B20;
  --line3:#262B31; --edge:#21262C; --edge2:#1A1F24; --panelb:#1E242B; --plot:#0F1317;
  --scene:#0B0F12; --ink4:#3E4750;
  --grid:#39424C; --scene-line:#1B2128; --scene-line2:#2B343E;
  --ink:#E8ECEF; --ink2:#97A2AC; --ink3:#5E6A75; --ink-strong:#C8CFD6;
  --amber:#FFB020; --amber-dim:#7A5A1B; --amber-ink:#1A1405;
  /* --amber-text: amber-toned TEXT read directly against --panel (an outline chip's
     label, not text on an amber fill — that's --amber-ink). #FFB020 already clears
     4.5:1 against this theme's dark --panel, so it's unchanged here; the light
     theme below needs a different value for the same purpose — see there. */
  --amber-text:#FFB020;
  --red:#FF6B5D; --green:#5DD08C; --cyan:#4FC3E8;
  /* semantic tints: status-tinted panel backgrounds + borders (amber/green/red/blue/purple).
     Dark values are the app's original hexes; light values are the paper-palette pastels. */
  --tint-amber:#1E1A10; --tint-amber2:#241D0E; --tint-amber-br:#3A2E14;
  --tint-green:#14201A; --tint-green2:#0E1A12; --tint-green-br:#2E4A33; --tint-green-br2:#244A2E;
  --tint-red:#241212; --tint-red2:#1A0E0C; --tint-red-br:#3A1414; --tint-red-br2:#3A1A1A;
  --tint-blue:#14202B; --tint-blue-br:#24404E; --tint-blue-hi:#3D6B8F;
  --tint-purple:#1E1428;
  --mono:ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono',Consolas,monospace;
  --sans:ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
:root[data-theme="light"]{
  color-scheme:light;
  /* OPTION A "COOL INSTRUMENT" — CEO-selected 2026-07-25.
     Cool near-white field, near-black cool ink, hairline structure. Status is a
     SEPARATE system from the amber brand accent, and every tone here is measured:
     scripts/palette_audit.py (WCAG contrast + colour-vision simulation) must pass.
     Rule that comes with it: at text weight hue alone cannot carry status —
     status always carries a glyph or the word as well as a colour. */
  --ground:#F7F8FA; --panel:#FFFFFF; --panel2:#EEF0F4; --panel3:#E6E9EF;
  --line:#D6DAE2; --line2:#B6BDC9; --hover:#E9ECF1; --band:#EEF0F4;
  --line3:#D2D6DE; --edge:#CDD2DA; --edge2:#DDE1E7; --panelb:#EEF0F4; --plot:#FFFFFF;
  --scene:#EEF1F5; --ink4:#6B737C;
  --grid:#C3C9D2; --scene-line:#DCE0E6; --scene-line2:#C7CDD5;
  --ink:#0F1419; --ink2:#384250; --ink3:#5C6672; --ink-strong:#1B2027;
  --amber:#FFB020; --amber-dim:#E2BE7C; --amber-ink:#7A5200;
  /* --amber-text: same purpose as the dark block above (amber-toned text against
     --panel), but #FFB020 measures 1.83:1 against this theme's white --panel —
     found live in the sign-in chip, WCAG needs 4.5:1. #7A5200 (this theme's own
     --amber-ink value) measures 6.92:1 and keeps the same amber family. */
  --amber-text:#7A5200;
  --red:#7E1F0E; --green:#146B4F; --cyan:#0B5FA0;
  --tint-amber:#F6EEDC; --tint-amber2:#F3E9D2; --tint-amber-br:#DDC79A;
  --tint-green:#E4F0EA; --tint-green2:#EDF5F0; --tint-green-br:#AFD0C0; --tint-green-br2:#9EC7B4;
  --tint-red:#F7E7E3; --tint-red2:#F6EDEA; --tint-red-br:#DCB0A6; --tint-red-br2:#D6A79C;
  --tint-blue:#E6EEF7; --tint-blue-br:#B0C7DE; --tint-blue-hi:#3E79AC;
  --tint-purple:#EFE9F5;
}