:root {
  /* --- COULEURS PRIMAIRES (Marque) --- */
  --color-primary: #111111;       /* Noir profond (jamais 100% noir pour la douceur écrans) */
  --color-primary-hover: #333333; /* Noir plus clair pour le survol */
  
  --color-background: #FFFFFF;    /* Fond page */
  --color-surface: #F4F4F5;       /* Fond secondaire (cartes, sections grises) */
  --color-surface-hover: #E4E4E7; /* Interaction sur surface */

  /* --- TEXTES --- */
  --color-text-main: #18181B;     /* Texte principal (Zinc-900) */
  --color-text-muted: #71717A;    /* Texte secondaire, légendes (Zinc-500) */
  --color-text-inverse: #FFFFFF;  /* Texte sur fond noir */

  /* --- FEEDBACK (Fonctionnel) --- */
  --color-success: #22C55E;       /* Vert vibrant (Validation) */
  --color-error: #EF4444;         /* Rouge alerte (Erreur) */
  --color-warning: #F59E0B;       /* Orange (Attention/Stock faible) */
  --color-info: #3B82F6;          /* Bleu (Information) */

  /* --- BORDURES --- */
  --color-border: #E4E4E7;        /* Gris très léger pour délimitations subtiles */
  --color-border-strong: #27272A; /* Bordure sombre pour éléments actifs */
  
  /* --- FAMILLES TYPOGRAPHIQUES --- */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  
  /* --- TAILLES DE TEXTE (Scale 1.25) --- */
  --text-xs: 0.75rem;    /* 12px - Labels, captions */
  --text-sm: 0.875rem;   /* 14px - Body petit, détails */
  --text-base: 1rem;     /* 16px - Body standard */
  --text-lg: 1.125rem;   /* 18px - Titres sections */
  --text-xl: 1.25rem;    /* 20px - Titres produits */
  --text-2xl: 1.5rem;    /* 24px - Gros titres */
  --text-3xl: 2rem;      /* 32px - Hero titles */

  /* --- GRAISSES --- */
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;    /* Utiliser avec parcimonie pour l'impact */

  /* --- ESPACEMENTS (Padding/Margin) --- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px - Base */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  
  /* --- RADIUS (Arrondi) --- */
  --radius-sm: 2px;     /* Boutons tags */
  --radius-md: 4px;     /* Boutons principaux, inputs */
  --radius-lg: 8px;     /* Cartes, Modal */
  --radius-full: 9999px;/* Pillules, Badges */

  /* --- OMBRES (Subtiles) --- */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}