/* ─────────────────────────────────────────────
   SEED Avatar v3.0 — Design Tokens & Base
   Aesthetic: Ethereal Celestial Dark
   ───────────────────────────────────────────── */

:root {
  /* ── Color Palette (Semantic) ── */
  --surface-deep: #06060e;
  --surface-base: #0c0c18;
  --surface-elevated: #13132a;
  --surface-glass: rgba(255, 255, 255, 0.035);
  --surface-glass-hover: rgba(255, 255, 255, 0.065);

  --text-primary: #eee8f5;
  --text-secondary: #a8a0b8;
  --text-muted: #605878;

  --accent-warm: #d4a574;
  --accent-warm-hover: #e0b88a;
  --accent-glow: rgba(212, 165, 116, 0.08);
  --accent-violet: #9b7ee8;
  --accent-violet-glow: rgba(155, 126, 232, 0.12);
  --accent-rose: #e87ea8;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --border-focus: rgba(212, 165, 116, 0.35);

  --success: #5ae080;
  --error: #e05a5a;
  --warning: #e0b05a;

  /* ── Spacing (8px grid) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* ── Typography ── */
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Source Sans 3', 'Outfit', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Elevation / Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.7);
  --shadow-glow-warm: 0 0 30px rgba(212, 165, 116, 0.12);
  --shadow-glow-violet: 0 0 30px rgba(155, 126, 232, 0.12);

  /* ── Radii ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ── Motion ── */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 700ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ── Global Reset ── */
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--surface-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
}

/* ── 3D Canvas ── */
#viewer {
  position: fixed;
  inset: 0;
  z-index: 1;
}

/* ── Grain Overlay ── */
.grain {
  position: fixed; inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ── Aurora Gradient Mesh Background ── */
.bg-gradient {
  position: fixed; inset: 0;
  z-index: 0;
  transition: background 4s ease;
  background:
    radial-gradient(ellipse 90% 65% at 50% -10%, rgba(75, 40, 130, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse 55% 50% at 85% 75%, rgba(140, 45, 100, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse 65% 55% at 10% 60%, rgba(50, 35, 95, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse 45% 40% at 70% 20%, rgba(212, 165, 116, 0.12) 0%, transparent 45%),
    radial-gradient(ellipse 50% 30% at 50% 95%, rgba(80, 40, 120, 0.3) 0%, transparent 50%),
    linear-gradient(180deg, #08081a 0%, #0c0c22 35%, #0a0a20 65%, #06060e 100%);
  animation: auroraDrift 20s ease-in-out infinite alternate;
}

/* ── Bottom Fade ── */
.bottom-fade {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 400px;
  background: linear-gradient(to top,
    rgba(6, 6, 14, 0.99) 0%,
    rgba(6, 6, 14, 0.95) 20%,
    rgba(6, 6, 14, 0.8) 40%,
    rgba(6, 6, 14, 0.45) 65%,
    transparent 100%);
  z-index: 5;
  pointer-events: none;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}