/* ──────────────────────────────────────────────────────────────
   base.css — design tokens, reset, typography, ambient backdrop
   ────────────────────────────────────────────────────────────── */

:root {
  --bg-deep: #0e0b05;
  --bg-panel: #12100a;
  --bg-panel-hover: #18140e;
  --gold: #f59e0b;
  --gold-muted: #c8a060;
  --amber-dark: #7a5520;
  --text-cream: #f0e0c0;
  --text-dim: #9a7040;
  --text-subtle: #5a3a15;
  --ember: rgba(210, 70, 5, 0.22);
  --border: rgba(180, 100, 20, 0.22);
  --font-serif: 'Cinzel', serif;
  --font-mono: 'DM Mono', monospace;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --page-max: 1120px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-dim);
  background: var(--bg-deep);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Ambient forge backdrop (palette-inspired, not card replica) */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: var(--bg-deep);
}

/* Bottom ember glow + top-left corner glow + top-right corner glow,
   mirroring the card's .glow / .glow-tl gradients at viewport scale. */
.ambient::before {
  content: '';
  position: absolute;
  bottom: -35vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(140vw, 1600px);
  height: 65vh;
  background:
    radial-gradient(ellipse 50% 60% at 50% 60%, var(--ember) 0%, transparent 65%),
    radial-gradient(ellipse 25% 40% at 10% 0%, rgba(180, 60, 5, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 25% 40% at 90% 0%, rgba(180, 60, 5, 0.14) 0%, transparent 70%);
}

.ambient::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.7;
  background-image:
    radial-gradient(1px 1px at 15% 25%, rgba(255, 170, 60, 0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 82% 20%, rgba(255, 200, 90, 0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 55% 40%, rgba(255, 130, 30, 0.32) 0%, transparent 100%),
    radial-gradient(1px 1px at 8% 70%, rgba(255, 190, 70, 0.28) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 62%, rgba(255, 110, 20, 0.32) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 88%, rgba(255, 160, 50, 0.28) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 92%, rgba(255, 200, 80, 0.25) 0%, transparent 100%);
}