:root {
  /* === Ink scale (deep blacks with subtle warm undertone) === */
  --ink-0: #07090c;
  --ink-1: #0b0f14;
  --ink-2: #11161c;
  --ink-3: #182028;
  --ink-4: #232c36;

  /* === Gold tiers === */
  --gold-deep: #b8842c;
  --gold: #d69b40;
  --gold-bright: #f2c778;
  --gold-champagne: #f5d486;

  /* === Neutrals === */
  --cream: #f5eee2;
  --cream-soft: #ecdfc9;
  --muted: #aab8c2;
  --muted-soft: #7e8b95;

  /* === Legacy aliases (kept for backwards compat with existing rules) === */
  --bg: var(--ink-1);
  --bg-soft: var(--ink-3);
  --panel: rgba(16, 23, 30, 0.78);
  --panel-strong: rgba(18, 26, 33, 0.95);
  --text: var(--cream);
  --accent: var(--gold);
  --accent-strong: var(--gold-bright);
  --line: rgba(214, 155, 64, 0.16);
  --line-strong: rgba(214, 155, 64, 0.32);
  --hairline: 1px solid rgba(245, 212, 134, 0.18);
  --hairline-soft: 1px solid rgba(245, 212, 134, 0.08);
  --success: #25d366;

  /* === Spacing (8pt) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* === Typography scale (fluid) === */
  --text-xs: 0.74rem;
  --text-sm: 0.86rem;
  --text-base: 1rem;
  --text-md: 1.06rem;
  --text-lg: clamp(1.2rem, 0.9rem + 0.6vw, 1.45rem);
  --text-xl: clamp(1.55rem, 1.1rem + 1.4vw, 2.1rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.4vw, 3rem);
  --text-3xl: clamp(2.6rem, 1.4rem + 3.8vw, 4.4rem);
  --text-display: clamp(3.4rem, 1.6rem + 6.6vw, 7.2rem);

  /* === Radii === */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* === Shadows (cinematic, layered, with warm gold cast) === */
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-card:
    0 1px 0 rgba(245, 212, 134, 0.04) inset,
    0 18px 48px rgba(0, 0, 0, 0.32);
  --shadow-cinematic:
    0 1px 0 rgba(245, 212, 134, 0.06) inset,
    0 24px 60px rgba(0, 0, 0, 0.42),
    0 60px 140px rgba(184, 132, 44, 0.06);
  --shadow: var(--shadow-card);

  /* === Motion === */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;
}

/* === Page background — refined cinematic dark === */
body {
  color: var(--cream);
  background:
    radial-gradient(ellipse 120% 80% at 12% -8%, rgba(214, 155, 64, 0.22), transparent 56%),
    radial-gradient(ellipse 80% 60% at 92% 4%, rgba(70, 112, 148, 0.14), transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 110%, rgba(184, 132, 44, 0.08), transparent 70%),
    linear-gradient(180deg, var(--ink-1) 0%, var(--ink-0) 100%);
  background-attachment: fixed;
}

/* === Subtle grid layer (kept, softened) === */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 110% 80% at 50% 0%, #000 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 110% 80% at 50% 0%, #000 35%, transparent 80%);
}

/* === Film-grain layer (very subtle) === */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}