/* ============================================================
   VARIABLES.CSS — L'Épicerie de Fleury
   Design tokens centralisés — modifier ici pour tout changer
   ============================================================ */

:root {
  /* === COULEURS === */
  --color-primary:        #2C3E2D;   /* vert forêt profond */
  --color-primary-light:  #3D5240;   /* vert moyen hover */
  --color-accent:         #B85C38;   /* brique terracotta */
  --color-accent-hover:   #9E4D2F;   /* brique foncée */
  --color-bg:             #F9F6F0;   /* papier off-white */
  --color-surface:        #FFFFFF;   /* surfaces pures */
  --color-surface-alt:    #F2EEE6;   /* fond alterné léger */
  --color-text:           #1A1A18;   /* off-black principal */
  --color-text-muted:     #5A5652;   /* secondaire */
  --color-text-light:     #8C8880;   /* léger */
  --color-border:         #DDD9D0;   /* bordures standard */
  --color-border-light:   #ECEAE4;   /* bordures légères */
  --color-open:           #2D7A4F;   /* vert statut ouvert */

  /* === TYPOGRAPHIE === */
  --font-serif:  'Playfair Display', Georgia, serif;
  --font-sans:   'Inter', system-ui, sans-serif;

  --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:  clamp(2.25rem, 3.5vw + 0.5rem, 3.25rem);
  --text-hero: clamp(2.75rem, 5vw + 0.75rem, 4.75rem);

  /* === ESPACEMENT (système 4px) === */
  --s1:  0.25rem;    /* 4px  */
  --s2:  0.5rem;     /* 8px  */
  --s3:  0.75rem;    /* 12px */
  --s4:  1rem;       /* 16px */
  --s5:  1.25rem;    /* 20px */
  --s6:  1.5rem;     /* 24px */
  --s8:  2rem;       /* 32px */
  --s10: 2.5rem;     /* 40px */
  --s12: 3rem;       /* 48px */
  --s16: 4rem;       /* 64px */
  --s20: 5rem;       /* 80px */
  --s24: 6rem;       /* 96px */
  --s32: 8rem;       /* 128px */

  /* === LAYOUT === */
  --max-width:   1280px;
  --nav-height:  72px;

  /* === BORDURES === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* === OMBRES (teintées dans la couleur de fond) === */
  --shadow-sm:    0 1px 4px rgba(26, 26, 24, 0.07);
  --shadow-md:    0 4px 20px rgba(26, 26, 24, 0.09);
  --shadow-lg:    0 12px 48px rgba(26, 26, 24, 0.12);
  --shadow-image: 0 20px 60px rgba(26, 26, 24, 0.16);

  /* === TRANSITIONS (Emil design-eng) === */
  --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast:     150ms;
  --dur-base:     220ms;
  --dur-slow:     380ms;

  /* === Z-INDEX === */
  --z-base:    1;
  --z-overlay: 10;
  --z-sticky:  100;
  --z-nav:     200;
  --z-mobile:  190;
}