:root,
:root[data-theme='light'] {
  --bg-main: #f0f4ff;
  --surface-main: #ffffffcc;
  --surface-elevated: #e8efffcc;
  --border-soft: #c9d5ff;
  --text-primary: #0b1437;
  --text-muted: #445d96;
  --accent: #ffd600;
  --gradient-primary: linear-gradient(135deg, #1a56ff, #00d4ff);
  --shadow-soft: 0 14px 40px rgba(10, 25, 61, 0.12);
}

:root[data-theme='dark'] {
  --bg-main: #080f24;
  --surface-main: #0d1b3ecc;
  --surface-elevated: #112154cc;
  --border-soft: #24407e;
  --text-primary: #e8f0ff;
  --text-muted: #9bb5e3;
  --accent: #ffd600;
  --gradient-primary: linear-gradient(135deg, #1a56ff, #00d4ff);
  --shadow-soft: 0 18px 45px rgba(2, 8, 23, 0.55);
}

body {
  background-image:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 40%),
    radial-gradient(circle at 90% 20%, color-mix(in srgb, #00d4ff 14%, transparent), transparent 46%),
    radial-gradient(circle at 50% 120%, color-mix(in srgb, #1a56ff 20%, transparent), transparent 55%);
}

.glass {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}