/* ==========================================================================
   tokens.css — the whole design system, in one place.
   Nothing below this file should ever hardcode a colour or an easing curve.
   ========================================================================== */

:root {
  /* --- colour (§1.1) — warm only. pink → burgundy → gold. ---------------- */
  --pastel-pink:   #FBD7E3;
  --dusty-pink:    #DFA0B3;
  --blush:         #F3C3D2;
  --cream:         #FFF8EF;
  --cream-dark:    #F7EAD9;
  --burgundy:      #4A1626;
  --burgundy-deep: #300D19;
  --wine:          #7C2142;
  --gold:          #CDA35C;
  --gold-light:    #ECD8A6;

  /* --- motion (§1.3) ----------------------------------------------------- */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:      250ms;
  --dur-medium:    600ms;
  --dur-slow:      1100ms;
  --dur-cinematic: 2200ms;

  /* --- type (§1.2) — three voices, no more. ------------------------------ */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-cute:    'Gaegu', 'Bradley Hand', cursive;
  --font-body:    'Quicksand', 'Trebuchet MS', 'Segoe UI', sans-serif;

  /* --- space & depth (§1.5) — 8px base, two shadows only. ---------------- */
  --sp:   8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;

  --r-sm:   14px;
  --r-md:   22px;
  --r-lg:   34px;
  --r-pill: 999px;

  --shadow-soft:   0 6px 20px rgba(74, 22, 38, .10), 0 2px 6px rgba(74, 22, 38, .06);
  --shadow-strong: 0 18px 44px rgba(74, 22, 38, .22), 0 6px 14px rgba(74, 22, 38, .12);

  /* --- layer order — declared once so nothing fights ---------------------- */
  --z-screen:  1;
  --z-sound:   80;
  --z-canvas:  90;
  --z-overlay: 100;
  --z-light:   140;
  --z-veil:    200;
  --z-cursor:  300;
}

/* --------------------------------------------------------------------------
   Reduced motion (§2.3). Not a token override — a real one.
   Ambient loops stop entirely; one-shot reveals collapse to a fast fade so
   the *sequence* still reads, it just stops being a performance.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:      120ms;
    --dur-medium:    160ms;
    --dur-slow:      200ms;
    --dur-cinematic: 300ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dur-fast) !important;
    scroll-behavior: auto !important;
  }

  /* Ambient loops are decorative by definition — remove, don't shorten. */
  .wl-hearts,
  .hero__sparkles,
  .stars {
    display: none !important;
  }
}