/* ==========================================================
   Theme: Aurora — soft, organic, warm
   Light + dark via prefers-color-scheme
   ========================================================== */

:root[data-theme="aurora"] {
  --bg: #f6f1ff;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #ede4ff;
  --text: #2a1c4a;
  --text-muted: #6b5a8a;
  --primary: #a78bfa;
  --primary-contrast: #ffffff;
  --accent: #c4b5fd;
  --danger: #e07c95;
  --success: #6dd3a6;
  --border: rgba(167, 139, 250, 0.20);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --border-w: 1.5px;

  --font-display: "Quicksand", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="aurora"] {
    --bg: #1a1230;
    --bg-elev: #241a40;
    --surface: #2c2050;
    --surface-2: #3a2c66;
    --text: #ece4ff;
    --text-muted: #b9a8db;
    --border: rgba(167, 139, 250, 0.25);
  }
}

/* Aurora background art: soft lavender blobs */
:root[data-theme="aurora"] .bg-art {
  background:
    radial-gradient(60% 50% at 10% 10%, rgba(167, 139, 250, 0.28), transparent 60%),
    radial-gradient(50% 50% at 90% 30%, rgba(196, 181, 253, 0.26), transparent 60%),
    radial-gradient(60% 60% at 50% 100%, rgba(221, 214, 254, 0.30), transparent 60%);
  animation: aurora-drift 22s var(--ease) infinite alternate;
}

@keyframes aurora-drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(0, -15px, 0) scale(1.05); }
}

/* Aurora-specific component tweaks */
:root[data-theme="aurora"] .brand-mark {
  background: linear-gradient(135deg, #a78bfa, #c4b5fd);
  border-radius: 50%;
}

:root[data-theme="aurora"] .card {
  box-shadow: 0 18px 50px -28px rgba(167, 139, 250, 0.45);
}

:root[data-theme="aurora"] .btn {
  background: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%);
  font-weight: 700;
}

:root[data-theme="aurora"] .btn-ghost {
  background: transparent;
  color: var(--text);
  border: var(--border-w) solid var(--border);
}

:root[data-theme="aurora"] h1, :root[data-theme="aurora"] h2 {
  background: linear-gradient(135deg, #8b6cf0, #b9a7f5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}