/* ============================================================
   BASE — Reset, body, font imports, atmospheric layers
   Three-layer atmosphere from the LoM cover:
   1. Cold abyss bg
   2. Warm radial glow from top-center (the "golden radiance")
   3. Vignette darkening at edges
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Tenor+Sans&display=swap');

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  /* Layer 2: Warm radial glow — the golden radiance from the cover.
     Large blazing ellipse at top-center, with side warmth bleeding in. */
  background-image:
    radial-gradient(
      ellipse 80% 55% at 50% -5%,
      oklch(78% 0.18 75 / 0.32) 0%,
      oklch(65% 0.18 65 / 0.18) 25%,
      oklch(50% 0.14 50 / 0.06) 55%,
      transparent 75%
    ),
    radial-gradient(
      ellipse 70% 45% at 15% 25%,
      oklch(50% 0.18 30 / 0.14) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 70% 45% at 85% 25%,
      oklch(50% 0.18 30 / 0.14) 0%,
      transparent 55%
    );
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

/* Subtle warm noise — adds tactile texture, sits BELOW content */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.4  0 0 0 0 0.2  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  mix-blend-mode: overlay;
}

/* Vignette — darkens edges to focus eye on center.
   Sits ABOVE content but is non-interactive. Subtle. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse 130% 100% at 50% 40%,
    transparent 35%,
    oklch(8% 0.03 295 / 0.45) 80%,
    oklch(6% 0.025 295 / 0.7) 100%
  );
  pointer-events: none;
  z-index: 1;
}

#app {
  position: relative;
  z-index: 2;
  min-height: 100vh;
}

.page-content {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-16);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* Scrollbar — warm tinted */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: oklch(12% 0.02 295); }
::-webkit-scrollbar-thumb {
  background: oklch(35% 0.05 60 / 0.5);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-amber); }

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