/* ============================================================================
   Aurora — interactive purple backdrop
   Soft purple → dark purple gradient with a live "ribbon field" (see
   assets/js/aurora-bg.js) that reacts to the pointer. Loaded after style.css
   so it can re-tune the base palette without touching the design system.
   ========================================================================== */

:root {
  /* interactive light position (updated live by aurora-bg.js) */
  --ax: 50%;
  --ay: 34%;

  /* purple ramp used by the backdrop layers (made soft, luminous) */
  --aur-100: #faf8ff;
  --aur-200: #f3ecff;
  --aur-300: #e7dbff;
  --aur-400: #d6beff;
  --aur-500: #c09bff;
  --aur-700: #e0b94a;
  --aur-900: #d4af37;
  --aur-950: #faf9fc;

  /* console surfaces read beautifully in the light theme */
  --panel: rgba(255, 255, 255, 0.62);
  --panel-2: rgba(255, 255, 255, 0.82);
  --line: rgba(212, 175, 55, 0.12);
}

/* ---- base canvas: pearlescent, radiant light-themed background ---- */
body {
  background-color: var(--aur-950);
  background-image:
    /* inner light that follows the pointer */
    radial-gradient(1100px 820px at var(--ax) var(--ay),
      rgba(219, 212, 255, 0.42) 0%,
      rgba(240, 225, 255, 0.22) 45%,
      rgba(255, 255, 255, 0) 80%),
    /* soft lavender → delicate sky pink sweep */
    linear-gradient(135deg,
      #fdfbff 0%,
      #f6f0ff 15%,
      #eae4ff 42%,
      #ffe4f2 72%,
      #f6f0ff 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* subtle light vignette and soft overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(130% 120% at 50% 120%, rgba(246, 240, 255, 0.45), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.35));
}

/* ---- backdrop holder & canvas ---- */
.aurora-bg { z-index: 0; }
.aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.aurora-bg.faint .aurora-canvas { opacity: 0.62; }
.aurora-bg.faint .orb { opacity: 0.26; }

/* orbs: glowing golden ambient light */
.o1 { background: radial-gradient(circle, rgba(212, 175, 55, 0.16), transparent 70%) !important; }
.o2 { background: radial-gradient(circle, rgba(243, 211, 107, 0.14), transparent 70%) !important; }
.o3 { background: radial-gradient(circle, rgba(255, 215, 0, 0.10), transparent 72%) !important; }

/* ---- clean white-theme card elevation ---- */
.glass,
.stat,
.card,
.event-card,
.topbar,
.sidebar {
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.04);
}
.topbar h1 { text-shadow: none; color: #0f172a; }
.sub { color: rgba(233, 226, 255, 0.72); }
.field span { color: rgba(233, 226, 255, 0.66); }
.logo-text {
  background: linear-gradient(90deg, #ffffff, #e5d9ff 55%, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 26px rgba(196, 181, 253, 0.35);
}
.btn-grad { box-shadow: 0 10px 26px rgba(88, 28, 135, 0.45); }
.btn-grad:hover { box-shadow: 0 16px 34px rgba(88, 28, 135, 0.6); }

/* ---- accessibility: honour reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .aurora-bg .orb { animation: none !important; }
}