/* tokens.css */
:root {
  --brand: #a647ff;
  --accent: #14a4d5;

  --bg: #0b0c10;
  --bg-elev: #121419;
  --fg: #e9eef2;
  --fg-soft: #cfd7dd;
  --muted: #9aa5ad;

  --card: #0f1116;
  --card-border: #232734;

  --ok: #22c55e;
  --warn: #f59e0b;
  --err: #ef4444;

  --radii: 12px;
  --space: 16px;
  --shadow: 0 6px 20px rgba(0,0,0,.25);

  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --fs-0: 12px; --fs-1: 14px; --fs-2: 16px; --fs-3: 18px; --fs-4: 22px; --fs-5: 28px; --fs-6: 36px;
}

/* LIGHT THEME */
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-elev: #f8fafc;
  --fg: #0f172a;
  --fg-soft: #334155;
  --muted: #64748b;

  --card: #ffffff;
  --card-border: #e2e8f0;
  --shadow: 0 6px 18px rgba(2,6,23,.08);
}

/* DARK THEME */
:root[data-theme="dark"] {
  --bg: #0b0c10;
  --bg-elev: #101218;
  --fg: #e5e7eb;
  --fg-soft: #cbd5e1;
  --muted: #94a3b8;

  --card: #0f1116;
  --card-border: #232734;
  --shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* System (default) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { color-scheme: light; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}

html,body{margin:0;padding:0}
body{
  font-family: var(--font-sans);
  background: linear-gradient(180deg, rgba(166,71,255,.06), transparent 140px), var(--bg);
  color: var(--fg);
  line-height: 1.55;
  font-size: var(--fs-2);
}
a{color: var(--accent); text-decoration: none}
a:hover{text-decoration: underline}
.container{max-width:1120px;margin:0 auto;padding: 24px}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius: var(--radii);
  background: var(--brand); color:white; border:0; box-shadow: var(--shadow);
}
.btn.ghost{background: transparent; color: var(--fg); border:1px solid var(--card-border)}
.chip{
  display:inline-block; padding:4px 10px; border-radius: 999px;
  border: 1px solid var(--card-border); color: var(--fg-soft); font-size: var(--fs-1);
}
.card{
  background: var(--card); border:1px solid var(--card-border);
  border-radius: var(--radii); padding: var(--space); box-shadow: var(--shadow);
}
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns: repeat(3, minmax(0,1fr))}
@media (max-width:900px){ .grid.cols-3{grid-template-columns:1fr} }
h1,h2,h3{line-height:1.2; margin: 0 0 12px}
h1{font-size:var(--fs-6)} h2{font-size:var(--fs-5)} h3{font-size:var(--fs-4)}
.heading-underline{ position:relative; display:inline-block; padding-bottom:6px; }
.heading-underline::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:48px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  border-radius:999px;
}
hr{border:none; border-top:1px solid var(--card-border); margin:16px 0}
table{width:100%; border-collapse:collapse; font-size:var(--fs-2)}
th,td{padding:10px;border-bottom:1px solid var(--card-border); text-align:left}
code{background:rgba(0,0,0,.2); padding:2px 6px; border-radius:6px}