/* ==========================================================================
   Mnet's World - Design Tokens
   A luxurious patisserie design system in pink, cream & gold.
   ========================================================================== */

:root {
  /* ── Color Palette ─────────────────────────────────────────────────────── */

  /* Pink / Blush scale */
  --color-pink-50:  #FFF5F5;
  --color-pink-100: #FDE8E8;
  --color-pink-200: #F8C4C4;
  --color-pink-300: #F2A0A0;
  --color-pink-400: #E87C8A;
  --color-pink-500: #D4607A;           /* Primary – CTAs, accents          */
  --color-pink-600: #B94D66;
  --color-pink-700: #9E3A52;
  --color-pink-800: #7A2B3F;

  /* Cream */
  --color-cream:      #FFF8F0;         /* Light section backgrounds         */
  --color-cream-dark: #F5EDE3;         /* Card / alternate backgrounds      */

  /* Gold */
  --color-gold:       #C5A55A;         /* Accent – borders, underlines      */
  --color-gold-light: #E8D5A0;
  --color-gold-dark:  #A68A3E;

  /* Neutrals */
  --color-white:      #FFFFFF;
  --color-black:      #1A1A1A;
  --color-text:       #2D2D2D;         /* Body text                         */
  --color-text-light: #6B6B6B;
  --color-text-muted: #9B9B9B;

  /* Functional */
  --color-success:    #48BB78;
  --color-whatsapp:   #25D366;
  --color-facebook:   #1877F2;
  --color-error:      #E53E3E;

  /* Footer / dark surface */
  --color-dark:       #4A1A35;
  --color-dark-light: #5E2845;

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Lato', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-script:  'Dancing Script', cursive;

  /* Font sizes – mobile-first (rem) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Font weights */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-bold:    700;

  /* ── Spacing ───────────────────────────────────────────────────────────── */
  --space-1:  0.25rem;     /*  4px */
  --space-2:  0.5rem;      /*  8px */
  --space-3:  0.75rem;     /* 12px */
  --space-4:  1rem;        /* 16px */
  --space-5:  1.25rem;     /* 20px */
  --space-6:  1.5rem;      /* 24px */
  --space-8:  2rem;        /* 32px */
  --space-10: 2.5rem;      /* 40px */
  --space-12: 3rem;        /* 48px */
  --space-16: 4rem;        /* 64px */
  --space-20: 5rem;        /* 80px */
  --space-24: 6rem;        /* 96px */

  /* ── Border Radius ─────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --shadow-sm:    0  1px  3px rgba(0, 0, 0, 0.06),
                  0  1px  2px rgba(0, 0, 0, 0.04);
  --shadow-md:    0  4px  6px rgba(0, 0, 0, 0.06),
                  0  2px  4px rgba(0, 0, 0, 0.04);
  --shadow-lg:    0 10px 15px rgba(0, 0, 0, 0.07),
                  0  4px  6px rgba(0, 0, 0, 0.04);
  --shadow-xl:    0 20px 25px rgba(0, 0, 0, 0.08),
                  0 10px 10px rgba(0, 0, 0, 0.03);
  --shadow-pink:  0  8px 24px rgba(212, 96, 122, 0.18);
  --shadow-gold:  0  4px 12px rgba(197, 165, 90, 0.20);

  /* ── Transitions ───────────────────────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.5s ease;
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1400px;

  --nav-height: 70px;

  /* ── Z-index layers ────────────────────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}