:root[data-theme="dark"]{
  /* Colors */
  --bg-0:#0b0f1a; /* main background */
  --bg-1:#101626; /* surface */
  --text-0:#e6e6e6;
  --text-1:#9aa4b2;
  --acc-amber:#ffd54a;
  --acc-cyan:#00e5ff;
  --acc-orange:#ff6a00;
  --line:#1f2740;
  --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;

  /* Typography */
  --ff-sans:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fs-900:clamp(2rem, 2.2vw + 1rem, 3rem);
  --fs-800:clamp(1.75rem, 1.8vw + 0.9rem, 2.5rem);
  --fs-700:1.5rem;
  --fs-600:1.25rem;
  --fs-500:1.125rem;
  --fs-400:1rem;
  --fs-300:.9375rem;
  --fs-200:.875rem;
  --lh-tight:1.15;
  --lh-normal:1.6;

  /* Radius & shadows */
  --radius-2xl:16px;
  --shadow-soft:0 10px 30px rgba(0,0,0,.35);
  --glow-amber:0 0 18px rgba(255,213,74,.25);
  --glow-cyan:0 0 18px rgba(0,229,255,.25);

  /* Auras */
  --grad-hero:radial-gradient(1200px 600px at 80% 20%, rgba(0,229,255,.12), transparent),
               radial-gradient(1000px 600px at 20% 80%, rgba(255,106,0,.10), transparent);
}

:root[data-theme="light"]{
  --bg-0:#f7f9fc;
  --bg-1:#ffffff;
  --text-0:#0b0f1a;
  --text-1:#495266;
  --acc-amber:#d89b00;
  --acc-cyan:#007b8a;
  --acc-orange:#c25100;
  --line:#d9e1f2;
  --ok:#15803d; --warn:#a16207; --err:#b91c1c;
  --shadow-soft:0 10px 30px rgba(0,0,0,.12);
  --glow-amber:0 0 10px rgba(216,155,0,.25);
  --glow-cyan:0 0 10px rgba(0,123,138,.25);
  --grad-hero:radial-gradient(1200px 600px at 80% 20%, rgba(0,123,138,.12), transparent),
               radial-gradient(1000px 600px at 20% 80%, rgba(194,81,0,.08), transparent);
}

/* Base text scale */
html{font-family:var(--ff-sans);font-size:16px}
body{color:var(--text-0);background:var(--bg-0)}

/* Utility tokens */
.u-surface{background:rgba(16,22,38,.85);backdrop-filter:blur(8px);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.u-glow-amber{box-shadow:var(--glow-amber)}
.u-glow-cyan{box-shadow:var(--glow-cyan)}