/* ============================================
   CHARTE GRAPHIQUE - Site de Recettes
   Direction : Chaud & Cookbook
   ============================================ */

:root {
  /* ── Primary: Terracotta / Warm Orange ── */
  --primary-50:  #FFF5F0;
  --primary-100: #FFE8DB;
  --primary-200: #FFC9A8;
  --primary-300: #FFA46E;
  --primary-400: #E8723A;   /* CTA principal, états actifs */
  --primary-500: #C95A24;   /* Hover CTA */
  --primary-600: #A04418;   /* États pressés */
  --primary-700: #7A3412;

  /* ── Secondary: Vert Sauge ── */
  --secondary-50:  #F4F8F4;
  --secondary-100: #E2EDE2;
  --secondary-200: #C4D9C4;
  --secondary-300: #8FB88F;
  --secondary-400: #5E9A5E;   /* Tags, badges, succès */
  --secondary-500: #3D7A3D;
  --secondary-600: #2B5E2B;

  /* ── Accent: Miel Doré ── */
  --accent-100: #FFF9E6;
  --accent-200: #FFEDB3;
  --accent-300: #FFD966;
  --accent-400: #F5C542;     /* Favoris, étoiles, highlights */
  --accent-500: #D4A520;

  /* ── Neutres chauds ── */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FDFAF7;    /* Fond de page */
  --neutral-100: #F5F0EB;    /* Fonds de cartes, lignes alternées */
  --neutral-200: #E8E0D8;    /* Bordures, séparateurs */
  --neutral-300: #D4C9BD;    /* Bordures désactivées */
  --neutral-400: #B0A396;    /* Texte placeholder */
  --neutral-500: #8A7D70;    /* Texte secondaire */
  --neutral-600: #6B5F53;    /* Texte corps */
  --neutral-700: #4A4039;    /* Titres */
  --neutral-800: #2E2620;    /* Texte principal */
  --neutral-900: #1A1410;    /* Texte le plus foncé */

  /* ── Sémantiques ── */
  --error:   #D94040;
  --warning: #E8A830;
  --success: #3D9A5E;
  --info:    #4A8EC9;

  /* ── Surfaces ── */
  --bg-page:     var(--neutral-50);
  --bg-card:     var(--neutral-0);
  --bg-input:    var(--neutral-0);
  --bg-header:   var(--neutral-0);
  --border-card: var(--neutral-200);

  /* ── Typographie ── */
  --font-heading: 'DM Serif Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Échelle typographique (ratio 1.25) */
  --text-xs:   0.75rem;    /* 12px - labels */
  --text-sm:   0.875rem;   /* 14px - méta, petits textes */
  --text-base: 1rem;       /* 16px - corps */
  --text-lg:   1.25rem;    /* 20px - titres de cartes */
  --text-xl:   1.563rem;   /* 25px - sous-sections h3 */
  --text-2xl:  1.953rem;   /* 31px - sections h2 */
  --text-3xl:  2.441rem;   /* 39px - titres de page h1 */

  /* Poids */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Hauteurs de ligne */
  --lh-tight:  1.25;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  /* ── Espacement ── */
  --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 */

  /* ── Bordures & Arrondis ── */
  --radius-sm:   4px;
  --radius-md:   6px;     /* Boutons, inputs */
  --radius-lg:   8px;     /* Cartes */
  --radius-xl:   12px;    /* Modales */
  --radius-full: 100px;   /* Pilules, avatars */

  /* ── Ombres ── */
  --shadow-sm:   0 1px 2px rgba(120, 80, 40, 0.05);
  --shadow-md:   0 1px 3px rgba(120, 80, 40, 0.06), 0 1px 2px rgba(120, 80, 40, 0.04);
  --shadow-lg:   0 4px 12px rgba(120, 80, 40, 0.08);
  --shadow-xl:   0 8px 24px rgba(120, 80, 40, 0.12);
  --shadow-focus: 0 0 0 3px rgba(232, 114, 58, 0.15);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;

  /* ── Breakpoints (référence, utilisés via media queries) ── */
  /* Mobile:  < 640px  */
  /* Tablet:  640px - 1023px */
  /* Desktop: >= 1024px */
  /* Wide:    >= 1280px */

  /* ── Z-index ── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-navbar:    300;
  --z-modal:     400;
  --z-overlay:   500;
  --z-toast:     600;

  /* ── Layout ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --navbar-height: 64px;
}