/* ============================================
   DESIGN TOKENS - ROSES & METS
   ============================================ */

:root {
  /* === COULEURS === */

  /* === PALETTE PRINCIPALE (Vert sauge) === */
  --color-primary-50: #F5F6F3;     /* Vert sauge ultra-clair (fonds subtils) */
  --color-primary-100: #E8EAE3;    /* Vert sauge très clair (hover léger) */
  --color-primary-200: #D1D5C7;    /* Vert sauge clair (bordures) */
  --color-primary-300: #A8AF93;    /* Vert sauge moyen-clair */
  --color-primary-400: #8A9272;    /* Vert sauge moyen */
  --color-primary-500: #6B7052;    /* Vert sauge BASE (principal) */
  --color-primary-600: #565A41;    /* Vert sauge foncé */
  --color-primary-700: #4B4C3A;    /* Vert sauge très foncé (accent) */
  --color-primary-800: #3A3D2D;    /* Vert sauge ultra-foncé */
  --color-primary-900: #2E3024;    /* Vert sauge noir (hover boutons) */

  /* === PALETTE SECONDAIRE (Rose poudré) === */
  --color-secondary-50: #FFEEF4;     /* Rose poudré ultra-clair (fonds subtils) */
  --color-secondary-100: #FCF0EE;    /* Rose poudré très clair (hover léger) */
  --color-secondary-200: #F9E1DD;    /* Rose poudré clair (bordures) */
  --color-secondary-300: #F3C3BA;    /* Rose poudré moyen-clair */
  --color-secondary-400: #EDA597;    /* Rose poudré moyen */
  --color-secondary-500: #E78774;    /* Rose poudré BASE */
  --color-secondary-600: #D96C58;    /* Rose poudré foncé */
  --color-secondary-700: #B5553E;    /* Rose poudré très foncé */
  --color-secondary-800: #914431;    /* Rose poudré ultra-foncé */
  --color-secondary-900: #6D3326;    /* Rose poudré noir */

  /* === PALETTE NEUTRE (Beige/Crème) === */
  --color-neutral-50: #FFFFFA;     /* Beige ultra-clair (sections) */
  --color-neutral-100: #FAF8F3;    /* Beige très clair (cartes) */
  --color-neutral-200: #FAF5EF;    /* Beige clair (fonds) */
  --color-neutral-300: #F5F0E8;    /* Beige moyen-clair */
  --color-neutral-400: #EFEAE0;    /* Beige moyen */
  --color-neutral-500: #E8E3D8;    /* Beige BASE */
  --color-neutral-600: #D4CFC4;    /* Beige foncé */
  --color-neutral-700: #C0BBB0;    /* Beige très foncé */
  --color-neutral-800: #ACA79C;    /* Beige ultra-foncé */
  --color-neutral-900: #989388;    /* Beige noir */

  /* === PALETTE ACCENT (Rouge corail) === */
  --color-accent-50: #FEF3F2;      /* Corail ultra-clair */
  --color-accent-100: #FCE4E1;     /* Corail très clair */
  --color-accent-200: #F9C9C3;     /* Corail clair */
  --color-accent-300: #F5ADA5;     /* Corail moyen-clair */
  --color-accent-400: #E17A6E;     /* Corail moyen */
  --color-accent-500: #CC5344;     /* Corail BASE (CTA) */
  --color-accent-600: #B54839;     /* Corail foncé */
  --color-accent-700: #9E3D2F;     /* Corail très foncé */
  --color-accent-800: #873226;     /* Corail ultra-foncé */
  --color-accent-900: #70271D;     /* Corail noir */

  /* === COULEURS GRISES === */
  --color-gray-50: #FAFAFA;        /* Gris ultra-clair */
  --color-gray-100: #F5F5F5;       /* Gris très clair (fond sections) */
  --color-gray-200: #EEEEEE;       /* Gris clair */
  --color-gray-300: #E0E0E0;       /* Gris moyen-clair (bordures) */
  --color-gray-400: #D0D0D0;       /* Gris moyen (bordures inputs) */
  --color-gray-500: #B0B0B0;       /* Gris BASE (placeholder) */
  --color-gray-600: #888888;       /* Gris foncé (copyright) */
  --color-gray-700: #666666;       /* Gris très foncé (texte secondaire) */
  --color-gray-800: #4A4A4A;       /* Gris ultra-foncé */
  --color-gray-900: #2C2C2C;       /* Gris noir (texte principal) */

  /* === COULEURS SYSTÈME === */
  --color-white: #FFFFFF;          /* Blanc pur */
  --color-black: #000000;          /* Noir pur */

  /* === COULEURS SÉMANTIQUES === */
  --color-success-light: #81C784;  /* Succès clair */
  --color-success: #4CAF50;        /* Succès */
  --color-success-dark: #388E3C;   /* Succès foncé */

  --color-error-light: #E57373;    /* Erreur claire */
  --color-error: #F44336;          /* Erreur */
  --color-error-dark: #D32F2F;     /* Erreur foncée */

  --color-warning-light: #FFB74D;  /* Avertissement clair */
  --color-warning: #FF9800;        /* Avertissement */
  --color-warning-dark: #F57C00;   /* Avertissement foncé */

  --color-info-light: #64B5F6;     /* Info claire */
  --color-info: #2196F3;           /* Info */
  --color-info-dark: #1976D2;      /* Info foncée */

  /* === OVERLAY === */
  --bg-overlay: rgba(0, 0, 0, 0.7);
  --overlay-light: rgba(0, 0, 0, 0.15);

  /* === TYPOGRAPHIE === */

  /* Familles de polices */
  /* Satisfy est utilisée pour tous les éléments manuscrits :
     - Éléments institutionnels : logo, header, footer
     - Éléments chaleureux : citations chef, prix, valeurs
     Cette cohérence renforce l'identité visuelle du restaurant */
  --font-heading: 'Satisfy', cursive;          /* Logo header/footer - style institutionnel */
  --font-handwriting: 'Satisfy', cursive;      /* Citations, prix, valeurs - style personnel */
  --font-body: 'Readex Pro', sans-serif;       /* Corps de texte - lisibilité optimale */

  /* Tailles de police */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-md: 1rem;         /* 16px */
  --font-size-base: 1rem;       /* 16px - alias pour font-size-md */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */
  --font-size-6xl: 3.75rem;     /* 60px */
  --font-size-7xl: 4.5rem;      /* 72px */

  /* Poids de police */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-regular: 400;    /* Alias pour font-weight-normal */
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Hauteur de ligne */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* === ESPACEMENTS === */

  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 3rem;      /* 48px */
  --spacing-3xl: 4rem;      /* 64px */
  --spacing-4xl: 6rem;      /* 96px */
  --spacing-5xl: 8rem;      /* 128px */

  /* === BORDURES === */

  /* Largeurs */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;

  /* Rayons de bordure */
  --border-radius-sm: 0.25rem;    /* 4px */
  --border-radius-md: 0.5rem;     /* 8px */
  --border-radius-lg: 0.75rem;    /* 12px */
  --border-radius-xl: 1rem;       /* 16px */
  --radius-sm: 0.25rem;           /* 4px - alias */
  --radius-md: 0.5rem;            /* 8px - alias */
  --radius-lg: 0.75rem;           /* 12px - alias */
  --radius-xl: 1rem;              /* 16px - alias */
  --radius-2xl: 1.5rem;           /* 24px - alias */
  --radius-full: 9999px;          /* Cercle complet (pills, badges) */

  /* === OMBRES === */

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* === ALIAS/MAPPINGS (Couleurs simplifiées pour usage courant) === */

  --color-primary: var(--color-primary-500);       /* Vert sauge principal */
  --color-secondary: var(--color-secondary-200);   /* Rose poudré clair pour fonds */
  --color-accent: var(--color-accent-500);         /* Corail pour CTA */
  --color-light: var(--color-white);               /* Blanc pour fonds clairs */
  --color-dark: var(--color-gray-900);             /* Gris foncé pour texte principal */
  --color-text: var(--color-gray-900);             /* Texte principal */
  --color-text-muted: var(--color-gray-600);       /* Texte secondaire/atténué */

  /* === TRANSITIONS === */

  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* === LARGEURS MAXIMALES === */

  --max-width-sm: 640px;
  --max-width-md: 768px;
  --max-width-lg: 1024px;
  --max-width-xl: 1280px;
  --max-width-xxl: 1440px;
  --max-width-2xl: 1536px;
  --max-width-mobile-menu: 400px;

  /* === Z-INDEX === */

  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
}

/* === BREAKPOINTS (pour référence, utilisés en media queries) === */
/*
  --breakpoint-xs: 0px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-xxl: 1440px;
  --breakpoint-2xl: 1536px;
*/