/* ════════════════════════════════════════════════════════════════════
   ELEVATION — Midnight Pop
   On a dark canvas, depth comes from soft, deep drop-shadows + a faint
   light top-edge, not from grey. "Glow" shadows let a pop colour bleed
   under hero elements for the WOW moments.
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Neutral depth ─────────────────────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:   0 4px 12px -4px rgba(0,0,0,0.5);
  --shadow-card: 0 24px 60px -28px rgba(0,0,0,0.7), 0 2px 8px -2px rgba(0,0,0,0.5);
  --shadow-lift: 0 48px 90px -36px rgba(0,0,0,0.78), 0 6px 16px -6px rgba(0,0,0,0.55);
  --shadow-pop:  0 80px 140px -50px rgba(0,0,0,0.85);

  /* ── Inset top highlight (sits ON a card to catch "light") ─────────── */
  --edge-top: inset 0 1px 0 rgba(251,248,243,0.06); /* @kind shadow */

  /* ── Colour glows (hero / hover reward) ────────────────────────────── */
  --glow-blue:      0 30px 80px -30px rgba(47,107,255,0.55);
  --glow-persimmon: 0 30px 80px -30px rgba(251,77,42,0.5);
  --glow-gold:      0 30px 80px -30px rgba(255,197,61,0.5);
  --glow-accent:    0 30px 80px -30px color-mix(in oklab, var(--accent) 55%, transparent);

  /* ── Focus ring (accessible, accent-tinted) ────────────────────────── */
  --ring: 0 0 0 3px var(--ink-900), 0 0 0 5px var(--accent);
}