/* ══════════════════════════════════════════════════════════════════════════
   ARK — Autonomous Reasoning Kernel · shared theme (Graphite & Emerald)
   Light + dark via html[data-theme]. Linked AFTER each page's inline <style> so
   it overrides the page :root with the shared palette. Variable-based pages
   (var(--bg), var(--cyan)…) re-theme automatically. Toggle = theme.js.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── DARK (default) ── */
:root, html[data-theme="dark"]{
  color-scheme:dark;       /* native controls (select popups, scrollbars) render dark — fixes white-on-white dropdowns */
  --bg:#0c0e0f;            /* graphite near-black            */
  --bg2:#15191a;          /* surface (cards, composer, nav) */
  --bg3:#1b2122;          /* raised surface                 */
  --card:rgba(255,255,255,0.035);
  --border:rgba(255,255,255,0.09);
  --border-h:rgba(16,185,129,0.40);
  --text:#e8eceb;
  --text2:#9aa8a2;
  --muted:#6b7670;
  /* accent (emerald = verified / passed governance) — --cyan kept as the accent
     name so every existing var(--cyan) reference becomes emerald, no rename. */
  --cyan:#10b981;
  --accent:#10b981;
  --accent-2:#34d399;
  --teal:#059669;
  --emerald:#10b981;
  --amber:#f59e0b;
  --red:#ef4444;
  --grad:linear-gradient(135deg,#10b981,#059669);
  --shadow:0 8px 30px rgba(0,0,0,0.45);
}

/* ── LIGHT ── */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f8f7;
  --bg2:#ffffff;
  --bg3:#eef2f0;
  --card:rgba(0,0,0,0.022);
  --border:#e3e8e6;
  --border-h:rgba(5,150,105,0.45);
  --text:#0b1110;
  --text2:#475550;
  --muted:#6b7670;
  --cyan:#059669;
  --accent:#059669;
  --accent-2:#10b981;
  --teal:#047857;
  --emerald:#059669;
  --amber:#d97706;
  --red:#dc2626;
  --grad:linear-gradient(135deg,#10b981,#059669);
  --shadow:0 8px 30px rgba(15,40,30,0.10);
}

/* base — graphite lives on <html>; <body> is transparent so the fixed network-bg canvas
   (network-bg.js, z-index:-1) shows through on every page. Overrides pages that hardcode a
   body background (loaded after their inline <style>). Smooth theme switch. */
html{ background:var(--bg); color:var(--text); }
body{ background:transparent; color:var(--text); transition:color .25s ease; }
#ark-net{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }

/* floating theme toggle (injected by theme.js) — works on every page */
#ark-theme-toggle{
  position:fixed; bottom:18px; left:18px; top:auto; right:auto; z-index:10000;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border); background:var(--bg2); color:var(--text);
  font-size:1rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); transition:transform .15s ease, border-color .15s ease;
}
#ark-theme-toggle:hover{ border-color:var(--accent); transform:scale(1.08); }
html[dir="rtl"] #ark-theme-toggle{ left:18px; right:auto; }
/* docked variant (app .topbar): sits inline beside the other header controls, not floating */
#ark-theme-toggle.ark-tt-inline{ position:static; inset:auto; width:34px; height:34px; box-shadow:none; flex:0 0 auto; }

/* the ARK identity line — "Autonomous Reasoning Kernel" wherever the brand appears */
.ark-fullname{ color:var(--text2); font-size:0.82em; letter-spacing:0.02em; }
.ark-fullname b{ color:var(--accent); font-weight:600; }
