/* ---------- Design Tokens ---------- */
:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --panel-2:#121b31;
  --text:#e5e7eb;
  --muted:#9aa3b2;
  --line:#1f2a44;
  --primary:#3b82f6;
  --primary-2:#60a5fa;
  --ok:#22c55e;
  --warn:#f59e0b;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --maxw:1120px;
  --speed:220ms;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff;
    --panel:#f8fafc;
    --panel-2:#eef2f7;
    --text:#0f172a;
    --muted:#475569;
    --line:#e2e8f0;
  }
}

/* manual light override */
[data-theme="light"]{
  --bg:#ffffff;
  --panel:#f8fafc;
  --panel-2:#eef2f7;
  --text:#0f172a;
  --muted:#475569;
  --line:#e2e8f0;
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(59,130,246,.15), transparent 60%),
    radial-gradient(800px 400px at 100% 10%, rgba(96,165,250,.12), transparent 60%),
    var(--bg);
  color:var(--text);
}

.container{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
h1,h2,h3{line-height:1.2; margin:0 0 12px}
h1{font-size:clamp(32px, 4vw, 56px); letter-spacing:.2px}
h2{font-size:clamp(24px, 2.6vw, 36px)}
p.lead{font-size:clamp(16px, 2vw, 18px); color:var(--muted); max-width:70ch}

a{color:inherit}
a:focus-visible, button:focus-visible{outline:2px solid var(--primary); outline-offset:2px; border-radius:10px}

/* Skip link */
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; background:var(--primary); color:#fff; padding:8px 12px; border-radius:8px}

/* Utilities */
.row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.muted{color:var(--muted)}
.spacer{height:8px}
.mt-20{margin-top:20px}
.mt-32{margin-top:32px}
.mt-48{margin-top:48px}
.center{text-align:center}