:root {
  /* ── Foundation ── */
  --bg-deep:        #1a1520;
  --bg-warm:        #241d2e;
  --bg-soft:        #f5f0f8;

  /* ── Purple scale ── */
  --purple:         #9b7fc4;
  --purple-deep:    #6b4f9e;
  --purple-soft:    #c4aee0;
  --purple-haze:    rgba(155, 127, 196, 0.15);

  /* ── Pink scale ── */
  --pink:           #e878a8;
  --pink-soft:      #f0b8d0;
  --pink-deep:      #c4507a;

  /* ── Hello Kitty palette ── */
  --hk-red:         #e8304a;
  --hk-cream:       #faf5f0;
  --hk-dot:         rgba(232, 120, 168, 0.10);

  /* ── Text ── */
  --text-primary:   #f5f0f8;
  --text-secondary: #b8a8c8;
  --text-dark:      #1a1520;

  /* ── Effects ── */
  --particle-purple: rgba(155, 127, 196, 0.5);
  --particle-pink:   rgba(232, 120, 168, 0.4);
  --glow:            rgba(155, 127, 196, 0.2);
  --glow-pink:       rgba(232, 120, 168, 0.25);
  --confetti-1:      #9b7fc4;
  --confetti-2:      #e878a8;
  --confetti-3:      #f0b8d0;
  --confetti-4:      #c4aee0;

  /* ── Typography ── */
  --font-display:     'Indie Flower', cursive;
  --font-handwriting: 'Indie Flower', cursive;
  --font-body:        'Indie Flower', cursive;

  /* ── Spacing ── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 5rem;

  /* ── Radius ── */
  --radius-sm:  12px;
  --radius-md:  20px;
  --radius-lg:  24px;
  --radius-xl:  28px;

  /* ── Shadows ── */
  --shadow-glow:   0 0 40px rgba(155, 127, 196, 0.18);
  --shadow-pink:   0 0 30px rgba(232, 120, 168, 0.20);
  --shadow-card:   0 8px 40px rgba(0, 0, 0, 0.45);
  --shadow-polar:  2px 4px 16px rgba(0, 0, 0, 0.35);

  /* ── Transitions ── */
  --ease-default:  cubic-bezier(0.45, 0, 0.55, 1);      /* power2.inOut */
  --ease-romantic: cubic-bezier(0.34, 1.56, 0.64, 1);   /* back.out(1.4) */
  --ease-dramatic: cubic-bezier(0.16, 1, 0.3, 1);       /* power4.out */

  /* ── Max widths ── */
  --max-letter:  640px;
  --max-quiz:    580px;
  --max-content: 800px;

  /* ── HK dot pattern background ── */
  --hk-dot-pattern: radial-gradient(
    circle,
    var(--hk-dot) 1px,
    transparent 1px
  );
  --hk-dot-size: 20px 20px;
}