/* ============================================================
   archon-tokens.css — one source of truth for the brand.
   Link this FIRST in both dashboard.html and admin.html, then
   delete the :root blocks from each file.

   Reconciled from the two prototypes, which had quietly drifted:
     --bg     light  #f1f3f8 (admin) vs #f4f6fa (dashboard)  -> #f4f6fa
     --faint  light  #7c8597 (admin) vs #939db0 (dashboard)  -> #7c8597 (readable on mobile)
     --bg     dark   #0b0d11 vs #0d0f13                      -> #0d0f13
     --panel  dark   #13171e vs #14181f                      -> #14181f
     --line   dark   #242b36 vs #252c38                      -> #252c38
     --purple        declared in admin, hardcoded #8c64dc in dashboard -> token
   ============================================================ */

:root[data-theme="light"]{
  --bg:#f4f6fa;    --panel:#ffffff;  --panel2:#eef1f7; --line:#dde3ec;
  --ink:#16202e;   --muted:#5d6677;  --faint:#7c8597;
  --accent:#1f7fd4;--accent2:#155ea3;--gold:#b5832a;
  --green:#2f9e6b; --red:#c5503f;    --purple:#7c52d6;
  --grid:#e3e8f0;
  --shadow:0 1px 3px rgba(20,30,50,.06),0 4px 16px rgba(20,30,50,.05);
}
:root[data-theme="dark"]{
  --bg:#0d0f13;    --panel:#14181f;  --panel2:#1a1f29; --line:#252c38;
  --ink:#e9eef5;   --muted:#828c9e;  --faint:#5a6373;
  --accent:#4fb6ff;--accent2:#2a7fd4;--gold:#e0b15a;
  --green:#52c08a; --red:#e06a5a;    --purple:#a07ff0;
  --grid:#252c38;
  --shadow:none;
}

/* Shared geometry — sidebars were 230px / 240px for no reason. */
:root{
  --side-w:236px;
  --radius-card:13px;
  --radius-ctl:9px;
  --bp-mobile:860px;
  --font-ui:Manrope,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ---- the mark ----------------------------------------------
   viewBox 158x168. Chevron "A" (stroke 12, mitred, clipped flat
   at the right leg) + banded "S" with 12r arcs and two notch cuts
   that give it the cut-steel terminals. Stroke-only: it inherits
   --accent, so it themes for free.

   The clipPath ids MUST be unique per instance on a page —
   dashboard.html already uses dacut/dscut for the sidebar and
   macut/mscut for the topbar copy. Keep that discipline.
------------------------------------------------------------- */
.brand-logo{width:30px;height:30px;flex-shrink:0}
.brand-logo .stroke{fill:none;stroke:var(--accent)}
.brand-logo .a-sharp{stroke-linejoin:miter;stroke-linecap:butt;stroke-miterlimit:10}
.brand-logo .s-sharp{stroke-linecap:butt}
.brand-logo .a-path{stroke-dasharray:var(--la);stroke-dashoffset:var(--la);animation:archon-draw .9s ease forwards}
.brand-logo .s-path{stroke-dasharray:var(--ls);stroke-dashoffset:var(--ls);animation:archon-draw 1s ease .5s forwards}
@keyframes archon-draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .brand-logo .a-path,.brand-logo .s-path{animation:none!important;stroke-dashoffset:0!important}
}

/* ---- lock states shared by both grids ---- */
.tt.f,.pill.free{background:rgba(130,140,158,.14);color:var(--muted)}
.tt.s,.pill.start{background:rgba(47,158,107,.14);color:var(--green)}
.tt.p,.pill.pro{background:rgba(181,131,42,.14);color:var(--gold)}
.tt.e,.pill.ent{background:rgba(31,127,212,.14);color:var(--accent)}