/* ============================================================
   CELEBRATEPLUS — CSS VARIABLES
   Design tokens. Import this first in every page.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  /* ── Brand Palette ── */
  --pink:        #FF4F8B;
  --pink-light:  #FF85AD;
  --pink-dark:   #D63870;
  --orange:      #FF8C42;
  --yellow:      #FFD93D;
  --yellow-dark: #F0C000;
  --purple:      #7C3AED;
  --purple-dark: #5B21B6;
  --teal:        #06B6D4;
  --green:       #10B981;

  /* ── Dark Palette ── */
  --dark:        #110A2E;
  --dark-2:      #1E1040;
  --dark-3:      #2D1B5E;
  --dark-4:      #3D2580;

  /* ── Light / BG ── */
  --bg:          #FFF8F2;
  --bg-alt:      #F9F0FF;
  --surface:     #FFFFFF;
  --border:      rgba(0,0,0,0.08);

  /* ── Text ── */
  --text:        #110A2E;
  --text-soft:   #4A3F6B;
  --text-muted:  #8B7FA8;
  --text-light:  rgba(255,255,255,0.85);
  --text-ghost:  rgba(255,255,255,0.5);

  /* ── Gradients ── */
  --grad-brand:    linear-gradient(135deg, var(--pink) 0%, var(--orange) 100%);
  --grad-purple:   linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%);
  --grad-dark:     linear-gradient(135deg, var(--dark) 0%, var(--dark-3) 60%, var(--dark-4) 100%);
  --grad-yellow:   linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%);
  --grad-teal:     linear-gradient(135deg, var(--teal) 0%, var(--purple) 100%);
  --grad-festive:  linear-gradient(135deg, #FF4F8B 0%, #FF8C42 33%, #FFD93D 66%, #7C3AED 100%);

  /* ── Typography ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Nunito', 'Segoe UI', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

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

  /* ── Radius ── */
  --radius-sm:  8px;
  --radius:     16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 2px 8px rgba(17,10,46,0.08);
  --shadow:     0 8px 32px rgba(17,10,46,0.12);
  --shadow-md:  0 12px 40px rgba(17,10,46,0.15);
  --shadow-lg:  0 24px 60px rgba(17,10,46,0.20);
  --shadow-pink: 0 8px 32px rgba(255,79,139,0.35);
  --shadow-purple: 0 8px 32px rgba(124,58,237,0.35);

  /* ── Transitions ── */
  --transition:     all 0.25s ease;
  --transition-slow: all 0.4s ease;

  /* ── Z-index ── */
  --z-float:   9999;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;

  /* ── Contact (single source of truth) ── */
  --phone:     "7717607117";
  --phone-display: "+91 77176 07117";
  --wa-link:   "https://wa.me/917717607117";
}