/* ============================================================
   Emirates Toys — Design Tokens
   variables.css
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     Brand Colors
  ---------------------------------------------------------- */
  --clr-red:          #E8322A;
  --clr-red-dark:     #C4251E;
  --clr-red-light:    #FF5A52;
  --clr-red-pale:     #FDECEA;

  --clr-green:        #3BAA6E;
  --clr-green-dark:   #2D8A58;
  --clr-green-light:  #52CC86;
  --clr-green-pale:   #E8F7EF;

  --clr-yellow:       #F5A623;
  --clr-yellow-dark:  #D4891A;
  --clr-yellow-light: #FFB94A;
  --clr-yellow-pale:  #FEF6E9;

  --clr-black:        #1A1A1A;
  --clr-gray-900:     #2D2D2D;
  --clr-gray-700:     #4A4A4A;
  --clr-gray-600:     #616161;
  --clr-gray-500:     #757575;
  --clr-gray-400:     #9E9E9E;
  --clr-gray-300:     #BDBDBD;
  --clr-gray-200:     #E0E0E0;
  --clr-gray-100:     #F5F5F5;
  --clr-gray-50:      #FAFAFA;
  --clr-white:        #FFFFFF;

  /* WhatsApp */
  --clr-whatsapp:     #25D366;
  --clr-whatsapp-dk:  #128C7E;

  /* ----------------------------------------------------------
     Typography
  ---------------------------------------------------------- */
  --font-display:     'Fredoka', sans-serif;   /* Hero titles, logo text */
  --font-heading:     'Baloo 2', sans-serif;   /* Section headings, product names */
  --font-body:        'Nunito', sans-serif;    /* Body text, UI, forms */

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

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ----------------------------------------------------------
     Spacing Scale
  ---------------------------------------------------------- */
  --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:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     Shadows
  ---------------------------------------------------------- */
  --shadow-xs:  0 1px 4px rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.14);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.18);

  --shadow-red:    0 6px 20px rgba(232, 50, 42, 0.35);
  --shadow-green:  0 6px 20px rgba(59, 170, 110, 0.35);
  --shadow-yellow: 0 6px 20px rgba(245, 166, 35, 0.35);

  /* ----------------------------------------------------------
     Transitions
  ---------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   120ms;
  --dur-normal: 220ms;
  --dur-slow:   380ms;
  --dur-slower: 550ms;

  /* ----------------------------------------------------------
     Z-Index Layers
  ---------------------------------------------------------- */
  --z-base:    1;
  --z-raised:  10;
  --z-header:  100;
  --z-fab:     150;
  --z-overlay: 200;
  --z-drawer:  210;
  --z-modal:   300;
  --z-toast:   400;

  /* ----------------------------------------------------------
     Layout
  ---------------------------------------------------------- */
  --header-height: 64px;
  --max-width:     1280px;
  --grid-gap:      var(--space-4);
  --section-pad-x: var(--space-4);
  --section-pad-y: var(--space-12);
}

/* Responsive overrides */
@media (min-width: 768px) {
  :root {
    --header-height:  72px;
    --grid-gap:       var(--space-6);
    --section-pad-x:  var(--space-8);
    --section-pad-y:  var(--space-16);
  }
}

@media (min-width: 1024px) {
  :root {
    --section-pad-x: var(--space-10);
    --section-pad-y: var(--space-20);
  }
}