/* theme.css — design tokens + global background. Swap palettes by editing :root. */
:root{
  --bg:#05060c;
  --bg-elev:#0b0e1a;
  --bg-card:rgba(18,22,40,.55);
  --fg:#e9edff;
  --fg-muted:#8b93bf;
  --accent:#63f2ff;        /* cyan */
  --accent-2:#ff2e97;      /* magenta */
  --accent-3:#a970ff;      /* violet */
  --ok:#3ef08a;
  --warn:#ffcc4d;
  --err:#ff5470;
  --border:rgba(120,140,200,.16);
  --border-strong:rgba(120,220,255,.35);
  --font-mono:"Cascadia Code","JetBrains Mono","Fira Code",ui-monospace,Consolas,monospace;
  --font-sans:"Segoe UI",system-ui,-apple-system,sans-serif;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 10px 40px rgba(0,0,0,.5);
  --glow-a:0 0 30px rgba(99,242,255,.25);
  --maxw:1200px;
}
/* animated cyber grid + gradient field behind everything */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(255,46,151,.16), transparent 60%),
    radial-gradient(1000px 700px at 8% 108%, rgba(99,242,255,.14), transparent 60%),
    radial-gradient(900px 500px at 50% 50%, rgba(169,112,255,.10), transparent 70%),
    var(--bg);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:48px 48px; mask-image:radial-gradient(circle at 50% 30%,#000,transparent 85%);
  animation:drift 40s linear infinite;
}
@keyframes drift{ to{ background-position:48px 48px } }
@media (prefers-reduced-motion:reduce){ body::after{animation:none} }
#view{ opacity:1; transition:opacity .12s } .booting #view{ opacity:0 }
.nojs{ padding:4rem 1rem; text-align:center; color:var(--fg-muted) }
.nojs code{ color:var(--accent) }