/* _embed-cyberpunk.css — shared embed-only retone toward the canonical
   cyberpunk palette (themes/tui-dashboard-full/index.html).

   PURPOSE
   The 57 toy pages under /arch/* and /toys/* each ship their own palette —
   most are already the cyberpunk night look, but a chunk lean bluish
   (tailwind cyan #22d3ee, bluish panels) or bespoke (lime/zinc/light-first).
   When embedded (?embed) inside the dark canonical page they read foreign.
   This sheet retones the COMMON structural custom properties (and a class
   safety net for var-less pages) to the canonical values. Color/surface
   only — no geometry, no layout, no behavior touched.

   SCOPE
   Every rule is gated to `html.embed` (embed mode only) AND to NOT-light
   (`:not([data-theme="light"])`). The parent's theme-sync forces embeds to
   data-theme="dark" inside the dark parent (postMessage shcTheme), so we
   optimize for dark; when a viewer toggles the embed to light the parent
   sets data-theme="light" and every rule below backs off, letting each
   page's own light palette through untouched.

   MECHANISM
   1) VAR REMAP (authoritative, specificity 0,2,1 — beats each page's own
      :root / :root[data-theme="dark"] at 0,1,0 / 0,2,0). These values are a
      strict NO-OP on the ~35 pages already on the cyberpunk palette and pull
      the ~22 foreign ones into line. Green/amber/red stay SEMANTIC (retoned
      to the canonical neon hues, same meaning). Brand blues (--b1/2/3,
      --blue*) are the fixed logo squares and are deliberately left alone.
   2) CLASS SAFETY NET (fallback, specificity 0,1,0 via :where — yields to
      every page's own state modifiers like .node.leader / .node.down, only
      fills in bare structural surfaces on pages that don't use the vars).

   Naming note: the toy convention inverts the canonical edge tokens
   (toy --line == canonical --edge #152230; toy --edge == canonical --edge2
   #1d3040). Values below follow the TOY convention so the already-correct
   pages don't shift; the rendered hairlines match the canonical either way.
*/

/* ============================================================= *
 * 1. VARIABLE REMAP — authoritative                             *
 * ============================================================= */
html.embed:not([data-theme="light"]){
  /* ---- grounds: page + panel interiors → near-black cyberpunk ---- */
  --bg:#04060a; --bg2:#070b11;
  --panel:#0a0f17; --panel2:#0c1219;
  --node-bg:linear-gradient(180deg,#0a0f17,#0c1219);
  --boxfill:#0c1219; --field:#0c1219; --chip:#0c1219;
  --well:#010305; --sunk:#010305;

  /* ---- terminal grounds → the ONE shared well (#010305, parent-page law) ---- */
  --term-bg:#010305; --tbg:#010305; --t-bg:#010305; --term:#010305;

  /* ---- edges → neon-tinted hairlines (toy convention) ---- */
  --line:#152230; --line2:#1d3040;
  --edge:#1d3040; --edge2:#2b4a63;
  --term-line:#152230; --termline:#152230; --tedge:#152230;
  --rule:rgba(37,231,255,.20); --term-rule:rgba(37,231,255,.20);
  --field-line:#1d3040; --wire:#1d3040;

  /* ---- ink → phosphor grays ---- */
  --txt:#b9c9ce; --ink:#b9c9ce; --fg:#b9c9ce;
  --bright:#eafcff;
  --dim:#8298a0; --dimmer:#71858d; --muted:#8298a0; --faint:#71858d;
  --term-ink:#dcecef; --term-txt:#dcecef; --t-ink:#dcecef; --tink:#dcecef;
  --term-dim:#8298a0; --t-dim:#8298a0; --tdim:#8298a0;

  /* ---- primary interactive accent → cyberpunk cyan ---- */
  --cyan:#25e7ff; --tcyan:#25e7ff;

  /* ---- decoration neon (never carry health state) ---- */
  --magenta:#ff3fb4; --mag:#ff3fb4;
  --violet:#a78bfa; --vio:#a78bfa; --n-vio:#a78bfa;

  /* ---- SEMANTIC state — retone hue, keep meaning ---- */
  --green:#39ff9c; --grn:#39ff9c; --ok:#39ff9c; --tok:#39ff9c;
  --amber:#ffce4a; --amb:#ffce4a;
  --red:#ff4d5e; --danger:#ff4d5e; --tbad:#ff4d5e;
  --dead:#475569; --downfill:#475569;

  /* ---- phosphor glow shadows (decoration; canonical, shadow-color only) ---- */
  --glow-c:0 0 6px rgba(37,231,255,.5),0 0 16px rgba(37,231,255,.22);
  --glow-g:0 0 6px rgba(57,255,156,.5),0 0 16px rgba(57,255,156,.2);
  --glow-a:0 0 6px rgba(255,206,74,.5),0 0 14px rgba(255,206,74,.2);
  --glow-r:0 0 6px rgba(255,77,94,.55),0 0 16px rgba(255,77,94,.25);
  --glow-m:0 0 6px rgba(255,63,180,.5),0 0 16px rgba(255,63,180,.2);
  --glow-v:0 0 6px rgba(167,139,250,.55),0 0 16px rgba(167,139,250,.22);
}

/* ── light mode: ONE cream surface family, shared with the parent page ──────
   Mirror of the dark remap, in the canonical LIGHT tokens
   (themes/tui-dashboard-full: --page-bg #ede4d0, panel #fffdf7→#f2ead9,
   edge #c7ba9a). Embeds must not drop a private ivory/white plate stack into
   the page: force every common surface var to the page family and RECESS
   nested cards/fields to --panel2, so they read as one family instead of a
   third, brighter plate. Terminals keep their own #010305 well (pinned in the
   embed sources), so no --well/--term-bg here. Specificity 0,2,1 beats each
   page's own :root[data-theme="light"] (0,2,0). */
html.embed[data-theme="light"]{
  --bg:#ede4d0; --bg2:#e5dcc6; --ground:#ede4d0;
  --panel:#fffdf7; --panel2:#f2ead9; --panel-2:#f2ead9;
  --node-bg:linear-gradient(180deg,#fffdf7,#f2ead9);
  --cardbg:#f2ead9; --cardln:#c7ba9a;
  --field:#f2ead9; --field-line:#c7ba9a;
  --boxfill:#fffdf7; --tokbg:#f2ead9; --surface:#fffdf7;
  --line2:#c7ba9a; --edge:#c7ba9a;
}

/* ============================================================= *
 * 2. CLASS SAFETY NET — fallback for var-less / bespoke pages    *
 *    specificity 0,1,0 (via :where) so ANY page rule with a      *
 *    state modifier wins; only bare structural surfaces retone.  *
 * ============================================================= */

/* panel / card interiors → near-black night glass */
:where(html.embed):not([data-theme="light"]) :where(.panel,.pane,.card){
  background:linear-gradient(180deg,#0a0f17,#0c1219);
}
/* recessed viz / terminal grounds → the one shared well (parent-page law) */
:where(html.embed):not([data-theme="light"]) :where(.term,.terminal,.console,.stage,.screen,.well){
  background:#010305;
}
/* node ground — routed through the (retoned) --node-bg so pages that fill
   nodes for state via a higher-specificity modifier keep their fill */
:where(html.embed):not([data-theme="light"]) :where(.node){
  background:var(--node-bg,linear-gradient(180deg,#0a0f17,#0c1219));
}
/* structural frame edges → neon-tinted hairline (yields to state borders) */
:where(html.embed):not([data-theme="light"]) :where(.panel,.pane,.card,.term,.terminal,.console,.stage,.screen,.node){
  border-color:#152230;
}
/* terminal ink */
:where(html.embed):not([data-theme="light"]) :where(.term,.terminal,.console){
  color:#dcecef;
}

/* light class net — cream family for var-less / bespoke light pages. Terminals
   (.term/.terminal/.console/.stage/.screen/.well) are deliberately EXCLUDED so
   they keep #010305; only the paper surfaces retone. */
:where(html.embed)[data-theme="light"] :where(.panel,.pane,.card){
  background:linear-gradient(180deg,#fffdf7,#f2ead9);
}
:where(html.embed)[data-theme="light"] :where(.node){
  background:var(--node-bg,linear-gradient(180deg,#fffdf7,#f2ead9));
}
:where(html.embed)[data-theme="light"] :where(.panel,.pane,.card,.node){
  border-color:#c7ba9a;
}