/* ============================================================
   JMJ CARPRO — DESIGN TOKENS
   Source unique de vérité pour toutes les couleurs et tokens
   partagés du projet.

   À importer EN PREMIER, avant tout autre stylesheet.
   ============================================================

   INDEX
   ─────────────────────────────────────────────────────────
   1. Couleur principale (vert marque JMJ)
   2. Couleur sombre secondaire
   3. Échelle de gris
   4. Couleur héro / dark-bg
   5. Succès / EPREL
   6. Danger / Erreur
   7. Avertissement
   8. Info
   9. Services (bleu)
  10. Favoris (ambre)
  11. Stock Michelin (orange)
  12. Panier badge
  13. Ombres
  14. Border-radius
  15. Transitions
  16. Typographie
  17. Aliases rétro-compatibles (NE PAS utiliser dans le nouveau code)
   ─────────────────────────────────────────────────────────
   Pour le nouveau code, utiliser --color-* / --shadow-* / --radius-*
   ============================================================ */

:root {

    /* ── 1. Couleur principale ─────────────────────────────── */
    --color-primary:          #64b22a;   /* vert JMJ officiel */
    --color-primary-dark:     #5ba526;   /* hover / gradient descendant */
    --color-primary-darker:   #4a8a1f;   /* bordures actives, focus ring */
    --color-primary-header:   #3a7010;   /* en-têtes tableau — WCAG AA sur fond blanc */
    --color-primary-light:    #e8f5e0;   /* fond doux (EPREL, succès) */
    --color-primary-subtle:   #f1f8e9;   /* fond très léger (footer popups) */

    /* ── 2. Couleur sombre secondaire ──────────────────────── */
    --color-dark:             #1a1a1a;   /* noir profond — textes forts, footer */
    --color-dark-secondary:   #333333;

    /* ── 3. Échelle de gris ────────────────────────────────── */
    --color-gray-900:         #1a1a1a;
    --color-gray-800:         #333333;
    --color-gray-700:         #444444;
    --color-gray-600:         #555555;
    --color-gray-500:         #666666;
    --color-gray-400:         #888888;   /* textes secondaires courants */
    --color-gray-300:         #999999;
    --color-gray-200:         #aaaaaa;
    --color-gray-150:         #bbbbbb;
    --color-gray-100:         #cccccc;   /* icônes désactivées */
    --color-gray-50:          #dddddd;
    --color-gray-30:          #eeeeee;
    --color-gray-20:          #f5f5f5;
    --color-gray-10:          #f9f9f9;
    --color-gray-5:           #f8f9fa;
    --color-white:            #ffffff;

    /* ── 4. Couleur héro / dark-bg ─────────────────────────── */
    --color-hero-bg:          #1e2630;   /* fond hero section Home */

    /* ── 5. Succès / EPREL greens ──────────────────────────── */
    --color-success:          #2e7d32;   /* texte lien EPREL, icônes succès */
    --color-success-dark:     #1b5e20;   /* en-tête popup EPREL */
    --color-success-bg:       #e8f5e0;   /* fond léger succès */
    --color-success-border:   #c8e6c9;   /* bordure popup EPREL */
    --color-success-mid:      #a5d6a7;   /* bouton voir commande */

    /* ── 6. Danger / Erreur ────────────────────────────────── */
    --color-danger:           #d32f2f;
    --color-danger-dark:      #b71c1c;   /* erreurs texte critiques */
    --color-danger-red:       #c62828;   /* bouton supprimer favoris */
    --color-danger-badge:     #e74c3c;   /* badge panier */

    /* ── 7. Avertissement ──────────────────────────────────── */
    --color-warning:          #f0ad4e;   /* badge warning MudBlazor */
    --color-warning-amber:    #f9a825;   /* icône info compte */
    --color-warning-brown:    #795548;   /* texte avertissement compte */
    --color-warning-bg:       #fff8e1;   /* fond alerte warning */
    --color-warning-border:   #ffe082;   /* bordure alerte warning */

    /* ── 8. Info ───────────────────────────────────────────── */
    --color-info:             #5bc0de;

    /* ── 9. Services (bleu) ────────────────────────────────── */
    --color-service:          #1565c0;   /* ligne service DevisCreer */
    --color-service-bg:       #eef5ff;
    --color-service-border:   #b0c4e8;
    --color-service-light:    #f0f4fb;

    /* ── 10. Favoris (ambre) ───────────────────────────────── */
    --color-favorite:         #f57f17;   /* étoile favoris */
    --color-favorite-dark:    #e65100;   /* hover étoile */
    --color-favorite-bg:      #fff8e1;
    --color-favorite-border:  #ffb74d;

    /* ── 11. Stock Michelin (orange) ───────────────────────── */
    --color-michelin:         #ffa726;   /* chip stock Michelin */
    --color-michelin-dark:    #e65100;   /* texte/bordure chip Michelin */

    /* ── 12. Panier badge ──────────────────────────────────── */
    --color-cart-badge:       #e74c3c;

    /* ── 13. Ombres ─────────────────────────────────────────── */
    --shadow-xs:   0 1px 3px rgba(0,0,0,0.08);
    --shadow-sm:   0 2px 4px rgba(0,0,0,0.10);
    --shadow-md:   0 4px 8px rgba(0,0,0,0.12);
    --shadow-lg:   0 8px 16px rgba(0,0,0,0.15);
    --shadow-xl:   0 12px 24px rgba(0,0,0,0.18);
    --shadow-soft: 0 4px 24px rgba(0,0,0,0.08);
    --shadow-hard: 0 10px 40px rgba(0,0,0,0.15);
    --shadow-card: 0 2px 12px rgba(0,0,0,0.06);

    /* ── 14. Border-radius ─────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-full: 9999px;

    /* ── 15. Transitions ────────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* ── 16. Typographie ────────────────────────────────────── */
    --font-primary: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-tech:    'Orbitron', monospace;

    /* ══════════════════════════════════════════════════════════
       17. ALIASES RÉTRO-COMPATIBLES
       ──────────────────────────────────────────────────────────
       Ces noms existent dans les fichiers CSS existants.
       NE PAS utiliser dans le nouveau code — utiliser les tokens
       --color-* ci-dessus à la place.
       ══════════════════════════════════════════════════════════ */
    --carpro-green:         #64b22a;
    --carpro-green-dark:    #5ba526;
    --carpro-green-light:   #e8f5e0;
    --carpro-green-lighter: #f1f8e9;
    --carpro-green-glow:    rgba(100,178,42,0.3);
    --carpro-dark:          #1a1a1a;
    --carpro-black:         #0f1419;
    --carpro-black-light:   #1c2127;
    --carpro-gray:          #666666;
    --carpro-gray-dark:     #333333;
    --carpro-gray-light:    #cccccc;
    --carpro-gray-lighter:  #f5f5f5;
    --carpro-white:         #ffffff;
    --carpro-success:       #64b22a;
    --carpro-warning:       #f0ad4e;
    --carpro-danger:        #d32f2f;
    --carpro-info:          #5bc0de;
    --carpro-orange:        #ff6b35;
    --carpro-blue:          #4ecdc4;
    --primary-color:        #64b22a;
    --secondary-color:      #1a1a1a;
    --text-light:           #f5f5f5;
    --text-dark:            #333333;
    --bg-header:            #ffffff;
    --bg-dark-hero:         #1e2630;
    --bg-light:             #f8f9fa;
    --glow-green:           0 0 20px rgba(100,178,42,0.3);
    --spacing-xs:           4px;
    --spacing-sm:           8px;
    --spacing-md:           16px;
    --spacing-lg:           24px;
    --spacing-xl:           32px;
    --border-radius-sm:     4px;
    --border-radius-md:     8px;
    --border-radius-lg:     12px;
    --border-radius-full:   9999px;
}