:root {
  /* ─── Kawaii Color Palette ─────────────────────────────── */
  --pink-50:  #FFF0F7;
  --pink-100: #FFD6EB;
  --pink-300: #FFB3D9;
  --pink-500: #FF6B9D;
  --pink-600: #E8528A;
  --pink-700: #C73870;

  --teal-100: #C0F7ED;
  --teal-300: #7EEEDD;
  --teal-500: #2DD4BF;
  --teal-600: #14B8A6;

  --purple-100: #F3E8FF;
  --purple-300: #D8B4FE;
  --purple-500: #A855F7;
  --purple-600: #9333EA;
  --purple-900: #1E0533;

  --yellow-300: #FDE68A;
  --yellow-400: #FBBF24;

  --white:      #FFFBFE;
  --off-white:  #FFF0F7;
  --card-white: rgba(255, 255, 255, 0.82);

  --dark:      #1A0A2E;
  --dark-mid:  #2D1B45;
  --dark-card: rgba(30, 5, 51, 0.75);

  --text-dark:  #1A0A2E;
  --text-mid:   #4A3060;
  --text-light: #9D7FB5;
  --text-white: #FFFBFE;

  /* ─── Gradients ───────────────────────────────────────── */
  --grad-hero:    linear-gradient(135deg, #1A0A2E 0%, #2D1B45 40%, #3D1F6B 100%);
  --grad-pink:    linear-gradient(135deg, #FF6B9D, #C084FC);
  --grad-teal:    linear-gradient(135deg, #2DD4BF, #4DD9AC);
  --grad-card:    linear-gradient(145deg, rgba(255,255,255,0.9), rgba(255,240,247,0.7));
  --grad-section: linear-gradient(180deg, #FFF0F7 0%, #F3E8FF 50%, #FFF0F7 100%);
  --grad-dark:    linear-gradient(180deg, #1A0A2E 0%, #2D1B45 100%);

  /* ─── Glassmorphism ────────────────────────────────────── */
  --glass-bg:     rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-blur:   blur(20px);

  --glass-dark-bg:     rgba(30, 5, 51, 0.55);
  --glass-dark-border: rgba(168, 85, 247, 0.35);

  /* ─── Shadows ──────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(255, 107, 157, 0.12);
  --shadow-md:   0 8px 32px rgba(255, 107, 157, 0.18);
  --shadow-lg:   0 20px 60px rgba(168, 85, 247, 0.22);
  --shadow-pink: 0 8px 32px rgba(255, 107, 157, 0.4);
  --shadow-teal: 0 8px 32px rgba(45, 212, 191, 0.35);
  --shadow-glow: 0 0 40px rgba(255, 107, 157, 0.45);

  /* ─── Border Radius ────────────────────────────────────── */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-2xl:  48px;
  --r-full: 9999px;

  /* ─── Typography ───────────────────────────────────────── */
  --font-display: 'Nunito', sans-serif;
  --font-body:    'Inter', sans-serif;

  --text-xs:   clamp(0.7rem,  1.5vw, 0.8rem);
  --text-sm:   clamp(0.85rem, 1.8vw, 0.95rem);
  --text-base: clamp(1rem,    2vw,   1.1rem);
  --text-lg:   clamp(1.1rem,  2.2vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 2.5vw, 1.5rem);
  --text-2xl:  clamp(1.5rem,  3vw,   2rem);
  --text-3xl:  clamp(2rem,    4vw,   2.75rem);
  --text-4xl:  clamp(2.5rem,  5vw,   3.75rem);
  --text-hero: clamp(3rem,    8vw,   7rem);

  /* ─── Spacing ──────────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ─── Motion ───────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    200ms;
  --dur-base:    400ms;
  --dur-slow:    700ms;

  /* ─── Layout ───────────────────────────────────────────── */
  --nav-h:    72px;
  --max-w:    1200px;
  --max-w-sm: 760px;
}