/* Core CSS Variables and Base Styles */
:root {
  --bg:#0b0c10;
  --card:#0f131c;
  --ink:#e9f3ff;
  --muted:#9bb1c7;
  --brand:#7ce3ff;
  --brand2:#60ffa8;
  --line:#1e2636;
  --shadow:rgba(3,8,18,.5);
  --radius:16px;
  --gap:16px;
}

[data-theme="light"] {
  --bg:#ffffff;
  --card:#f8fafc;
  --ink:#0f172a;
  --muted:#64748b;
  --brand:#0ea5e9;
  --brand2:#10b981;
  --line:#e2e8f0;
  --shadow:rgba(15,23,42,.1);
}

/* Base Styles */
* {
  box-sizing:border-box;
}

html, body {
  background:radial-gradient(1200px 500px at 15% -10%, rgba(124,227,255,.14), transparent 50%),
             radial-gradient(900px 450px at 90% -10%, rgba(96,255,168,.09), transparent 60%), var(--bg);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  margin:0;
  line-height:1.6;
  min-height:100vh;
  transition:background-color 0.3s ease,color 0.3s ease;
}

[data-theme="light"] html, [data-theme="light"] body {
  background:radial-gradient(1200px 500px at 15% -10%, rgba(14,165,233,.08), transparent 50%),
             radial-gradient(900px 450px at 90% -10%, rgba(16,185,129,.06), transparent 60%), var(--bg);
}

/* Animations */
@keyframes slideIn {
  from { transform:translateX(400px); opacity:0; }
  to { transform:translateX(0); opacity:1; }
}

@keyframes slideOut {
  from { transform:translateX(0); opacity:1; }
  to { transform:translateX(400px); opacity:0; }
}

@keyframes pulse {
  0%,100% { opacity:1; }
  50% { opacity:0.5; }
}