/* ============================================================
   AURORA GLASS skin — faithful to "Aurora Glass — Design System"
   Activated by :root[data-skin="aurora"]. Maps the design-system
   tokens onto the app's existing variable names so every
   component adopts the look without rewrites.
   ============================================================ */

:root[data-skin="aurora"] {
  /* ---- Design-system source tokens ---- */
  --bg-0: #0a0a1a;
  --bg-1: #0e0c24;
  --ink-0: #f5f3ff;
  --ink-a1: rgba(245, 243, 255, 0.78);
  --ink-a2: rgba(245, 243, 255, 0.55);
  --ink-a3: rgba(245, 243, 255, 0.32);
  --line:    rgba(255, 255, 255, 0.08);
  --line-2:  rgba(255, 255, 255, 0.14);
  --glass:   rgba(255, 255, 255, 0.04);
  --glass-2: rgba(255, 255, 255, 0.06);
  --glass-hi:rgba(255, 255, 255, 0.10);
  --c-invest:  oklch(0.78 0.18 175);
  --c-overpay: oklch(0.74 0.17 295);
  --c-lump:    oklch(0.78 0.16 60);
  --c-std:     oklch(0.78 0.05 250);
  --c-warn:    oklch(0.78 0.18 30);
  --c-good:    oklch(0.80 0.18 145);
  --blur: blur(28px) saturate(140%);
  --shadow-card: 0 12px 40px -16px rgba(0,0,0,0.55);

  /* ---- Map onto the app's tokens ---- */
  --bg: var(--bg-0);
  --bg-grad: var(--bg-1);
  --surface:   var(--glass);
  --surface-2: var(--glass-2);
  --surface-3: var(--glass-hi);
  --border:        var(--line);
  --border-strong: var(--line-2);
  --ink:   var(--ink-0);
  --ink-2: var(--ink-a1);
  --ink-3: var(--ink-a2);

  --accent: var(--c-invest);
  --accent-strong: var(--c-overpay);
  --accent-ink: #ffffff;
  --accent-soft: rgba(160, 130, 255, 0.16);
  --accent-line: var(--c-overpay);

  --pos: var(--c-good);
  --pos-soft: oklch(0.55 0.12 145 / 0.22);
  --neg: var(--c-warn);
  --neg-soft: oklch(0.55 0.14 30 / 0.22);
  --warn: var(--c-lump);
  --warn-soft: oklch(0.6 0.1 60 / 0.20);

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 28px;

  --shadow-sm: 0 2px 10px -4px rgba(0,0,0,0.5);
  --shadow-md: var(--shadow-card);
  --shadow-lg: 0 24px 70px -20px rgba(0,0,0,0.7);
  --ring: 0 0 0 3px oklch(0.74 0.17 295 / 0.35);

  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  background: var(--bg-0);
  color: var(--ink-0);
}

/* ---- Light variant (cream) ---- */
:root[data-skin="aurora"][data-theme="light"] {
  --bg-0: #f4f2ee;
  --bg-1: #ebe7df;
  --ink-0: #131124;
  --ink-a1: rgba(19, 17, 36, 0.78);
  --ink-a2: rgba(19, 17, 36, 0.55);
  --ink-a3: rgba(19, 17, 36, 0.32);
  --line:    rgba(19, 17, 36, 0.10);
  --line-2:  rgba(19, 17, 36, 0.18);
  --glass:   rgba(255, 255, 255, 0.45);
  --glass-2: rgba(255, 255, 255, 0.60);
  --glass-hi:rgba(255, 255, 255, 0.85);
  --accent-ink: #ffffff;
  --accent-soft: rgba(120, 80, 230, 0.12);
}

/* ===========================================================
   Aurora background — official 3-blob layer
   =========================================================== */
.aurora { display: none; }
:root[data-skin="aurora"] .aurora {
  display: block; position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
:root[data-skin="aurora"] .aurora span {
  position: absolute; border-radius: 50%;
  filter: blur(120px); opacity: 0.5; mix-blend-mode: screen;
}
:root[data-skin="aurora"] .aurora .a {
  width: 60vw; height: 60vw; left: -10vw; top: -20vw;
  background: radial-gradient(circle, oklch(0.55 0.28 295) 0%, transparent 65%);
  animation: aaDrift1 24s ease-in-out infinite alternate;
}
:root[data-skin="aurora"] .aurora .b {
  width: 55vw; height: 55vw; right: -15vw; top: 6vh;
  background: radial-gradient(circle, oklch(0.55 0.24 195) 0%, transparent 65%);
  animation: aaDrift2 30s ease-in-out infinite alternate;
}
:root[data-skin="aurora"] .aurora .c {
  width: 45vw; height: 45vw; left: 30vw; bottom: -20vw;
  background: radial-gradient(circle, oklch(0.55 0.20 25) 0%, transparent 65%);
  animation: aaDrift3 36s ease-in-out infinite alternate;
}
:root[data-skin="aurora"][data-theme="light"] .aurora span {
  opacity: 0.28; mix-blend-mode: multiply; filter: blur(140px);
}
@keyframes aaDrift1 { to { transform: translate(8vw, 6vh); } }
@keyframes aaDrift2 { to { transform: translate(-6vw, 8vh); } }
@keyframes aaDrift3 { to { transform: translate(4vw, -6vh); } }
@media (prefers-reduced-motion: reduce) {
  :root[data-skin="aurora"] .aurora span { animation: none; }
}

/* content above the aurora */
:root[data-skin="aurora"] body { background: var(--bg-0); }
:root[data-skin="aurora"] #root,
:root[data-skin="aurora"] .seo,
:root[data-skin="aurora"] .seo-nav,
:root[data-skin="aurora"] .seo-footer { position: relative; z-index: 1; }
:root[data-skin="aurora"] .app { background: transparent; }