/* ============================================================
   theme-vars.css — the Seektra colour tokens, extracted VERBATIM
   from the inline <style> block in index.html.

   Why this file exists: /match (compatibility.html) needs the same
   variables that compat.css, header-menu.js and loader.js read, but
   loading index's whole 800-line inline block would mean duplicating
   its layout too. This is just the tokens.

   ⚠ These values are a COPY of index.html's. If you change a colour
   there, change it here too — or better, delete the block from
   index.html and have it link this file instead, so there's one source.
   ============================================================ */
[data-theme="dark"]{
  --bg-primary:#0a0812; --bg-secondary:#150b22; --bg-tertiary:#1f0d35;
  --bg-card:rgba(21,11,34,0.82);
  --text-primary:#f5e9ff; --text-secondary:#b8a4d0; --text-muted:#7a6a92;
  --border-color:rgba(192,132,252,0.18); --border-soft:rgba(192,132,252,0.10);
  --input-bg:rgba(10,8,18,0.6);
  --accent:#c084fc; --accent-hover:#a855f7; --accent-soft:rgba(192,132,252,0.14);
  --accent-gold:#e8943a; --btn-bg:#c084fc; --btn-bg-hover:#d8b4fe;
  --card-shadow:0 25px 60px -12px rgba(0,0,0,0.7);
  --retro:#f87171; --ok:#6ee7b7;
  --grid-line:rgba(255,255,255,0.025);
  --dim:#7a6a92; --gold:#ffbe4d;
}
[data-theme="light"],
:root:not([data-theme="dark"]){
  --bg-primary:#faf7ff; --bg-secondary:#f1eafc; --bg-tertiary:#ffffff;
  --bg-card:#ffffff;
  --text-primary:#2a1a3e; --text-secondary:#5a4a76; --text-muted:#9385ab;
  --border-color:rgba(147,51,234,0.20); --border-soft:rgba(147,51,234,0.10);
  --input-bg:#ffffff;
  --accent:#8b3ff0; --accent-hover:#7c2fe0; --accent-soft:rgba(139,63,240,0.10);
  --accent-gold:#c2710a; --btn-bg:#8b3ff0; --btn-bg-hover:#7c2fe0;
  --card-shadow:0 18px 45px -14px rgba(139,63,240,0.20);
  --retro:#dc2626; --ok:#059669;
  --grid-line:rgba(139,63,240,0.04);
  --dim:#9385ab; --gold:#c2710a;
}

/* Spinner used by compat.js ("<span class='spin'></span>").
   Copied from index.html — note the keyframe is `sp`, not `spin`. */
.spin{width:18px;height:18px;border:2px solid rgba(192,132,252,0.3);
  border-top-color:var(--accent);border-radius:50%;display:inline-block;
  animation:sp 0.7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}