/* ============================================================
   Vitaalands — Base utilities & reusable surface classes
   Mirrors the app codebase's Spatial Glass system so design-system
   cards and UI kits share the exact same surfaces.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  background-color: var(--vita-canvas);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- 3-tier glass depth ---- */
.glass-1 {
  background: var(--fill-glass-1);
  -webkit-backdrop-filter: blur(var(--blur-1));
  backdrop-filter: blur(var(--blur-1));
  border: 1px solid var(--border-glass);
  box-shadow: var(--elev-1);
}
.glass-2 {
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  -webkit-backdrop-filter: blur(var(--blur-2));
  backdrop-filter: blur(var(--blur-2));
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-xl);
  box-shadow: var(--elev-2);
}
.glass-3 {
  background: linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  -webkit-backdrop-filter: blur(var(--blur-3));
  backdrop-filter: blur(var(--blur-3));
  border: 1px solid var(--border-glass-strong);
  border-radius: var(--radius-2xl);
  box-shadow: var(--elev-3);
}

/* ---- Brand spectral text / fills ---- */
.vita-spectrum-text {
  background: var(--vita-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Aurora background (calm spatial depth) ---- */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--vita-canvas);
  overflow: hidden;
}
.aurora-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(140px);
  opacity: 0.18;
  will-change: transform;
}
.aurora-blob--1 { top: -12%; left: -8%;  width: 52vw; height: 52vw;
  background: radial-gradient(circle, var(--aurora-1) 0%, transparent 68%);
  animation: aurora-drift-1 44s infinite alternate var(--ease-calm); }
.aurora-blob--2 { bottom: -18%; right: -10%; width: 58vw; height: 58vw;
  background: radial-gradient(circle, var(--aurora-2) 0%, transparent 68%);
  animation: aurora-drift-2 52s infinite alternate var(--ease-calm); }
.aurora-blob--3 { top: 32%; left: 30%; width: 46vw; height: 46vw; opacity: 0.16;
  background: radial-gradient(circle, var(--aurora-3) 0%, transparent 70%);
  animation: aurora-drift-3 60s infinite alternate var(--ease-calm); }

@keyframes aurora-drift-1 { 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(8%,6%) scale(1.08);} }
@keyframes aurora-drift-2 { 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(-6%,-8%) scale(1.06);} }
@keyframes aurora-drift-3 { 0%{transform:translate(0,0) scale(0.96);} 100%{transform:translate(5%,-5%) scale(1.04);} }

@media (prefers-reduced-motion: reduce) {
  .aurora-blob { animation: none; }
}

/* ---- Custom scrollbar (slim, calm) ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }