/* Theme variables (light default) */
:root{
  --bg:#f8fafc;
  --ink:#0f172a;
  --card:#ffffff;
  --muted:#64748b;
  --b:#e5e7eb;
  --b2:#cbd5e1;

  --nav-bg:#e2e8f0;
  --nav-ink:#0f172a;
  --pill-bg:rgba(0,0,0,.04);
  --pill-bg-hover:rgba(0,0,0,.08);
  --divider:rgba(0,0,0,.12);
}

[data-theme="dark"]{
  --bg:#0f172a;
  --ink:#f1f5f9;
  --card:#1e293b;
  --muted:#94a3b8;
  --b:#334155;
  --b2:#475569;

  --nav-bg:#0f172a;
  --nav-ink:#e2e8f0;
  --pill-bg:rgba(255,255,255,.06);
  --pill-bg-hover:rgba(255,255,255,.14);
  --divider:rgba(255,255,255,.12);
}

/* Apply variables */
body{ background:var(--bg); color:var(--ink); transition:background .25s,color .25s; }
.card{ background:var(--card); color:var(--ink); border:1px solid var(--b); }
.badge{ border-color:var(--b2); color:var(--ink); }

/* Alliance switch select in nav */
.switcher select{
  background:var(--pill-bg);
  color:var(--nav-ink);
  border:1px solid var(--divider);
}
.switcher select option{
  background:var(--nav-bg);
  color:var(--nav-ink);
}