/*================================
MATVILLA  Variables CSS Toutes les valeurs réutilisables 
================================*/

:root {
   /* ========================================
       COULEURS PRINCIPALES (LOGO)
       ======================================== */

   /* Orange - Couleur primaire du logo "MAT" */
   --orange-primary: #FF8C1A;
   --orange-dark: #E67A0A;
   /* Hover, états actifs */
   --orange-light: #FFB366;
   /* Backgrounds légers */
   --orange-lighter: #FFE0B3;
   /* Backgrounds très légers */

   /* Gris - Couleur secondaire du logo "VILLA" */
   --gray-primary: #B3B3B3;
   --gray-dark: #4A4A4A;
   /* Textes principaux */
   --gray-medium: #808080;
   /* Textes secondaires */
   --gray-light: #E8E8E8;
   /* Backgrounds, sections */
   --gray-lighter: #F5F5F5;
   /* Backgrounds très clairs */

   /* Neutres */
   --white: #FFFFFF;
   --black: #1A1A1A;

   /* ========================================
       VARIABLES SÉMANTIQUES
       ======================================== */

   /* Couleurs d'action */
   --color-primary: var(--orange-primary);
   --color-primary-dark: var(--orange-dark);
   --color-primary-light: var(--orange-light);

   /* Couleurs de texte */
   --text-primary: var(--gray-dark);
   --text-secondary: var(--gray-medium);
   --text-light: var(--gray-primary);
   --text-on-primary: var(--white);

   /* Couleurs de fond */
   --bg-primary: var(--white);
   --bg-secondary: var(--gray-lighter);
   --bg-dark: var(--gray-dark);

   /* Couleurs de bordure */
   --border-light: var(--gray-light);
   --border-medium: var(--gray-primary);
   --border-primary: var(--orange-primary);

   /* Boutons */
   --btn-primary-bg: var(--orange-primary);
   --btn-primary-hover: var(--orange-dark);
   --btn-primary-text: var(--white);

   --btn-secondary-bg: var(--gray-light);
   --btn-secondary-hover: var(--gray-primary);
   --btn-secondary-text: var(--gray-dark);

   /* États */
   --success: #10B981;
   --error: #EF4444;
   --warning: #F59E0B;
   --info: var(--orange-primary);

   /* Compatibilité avec anciennes variables */
   --dark: var(--gray-dark);
   --gray: var(--gray-medium);

   /* === ESPACEMENTS === */
   --spacing-xs: 8px;
   --spacing-sm: 16px;
   --spacing-md: 24px;
   --spacing-lg: 40px;
   --spacing-xl: 64px;
   --spacing-xxl: 96px;

   /* === TYPOGRAPHIE === */
   --font-primary: 'Poppins', sans-serif;
   --font-secondary: 'Inter', sans-serif;

   --font-size-xs: 14px;
   --font-size-sm: 16px;
   --font-size-md: 18px;
   --font-size-lg: 24px;
   --font-size-xl: 32px;
   --font-size-xxl: 48px;
   --font-size-hero: 64px;

   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;

   /* === BORDURES === */
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-xl: 24px;

   /* === OMBRES === */
   --shadow-sm: 0 1px 2px rgba(255, 140, 26, 0.05);
   --shadow-md: 0 4px 6px rgba(255, 140, 26, 0.1);
   --shadow-lg: 0 10px 15px rgba(255, 140, 26, 0.1);
   --shadow-xl: 0 20px 25px rgba(255, 140, 26, 0.15);
   --shadow-hover: 0 12px 32px rgba(255, 140, 26, 0.2);

   /* === DÉGRADÉS === */
   --gradient-primary: linear-gradient(135deg, var(--orange-primary), var(--orange-dark));
   --gradient-hero: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-light) 100%);

   /* === TRANSITIONS === */
   --transition-fast: 0.2s ease;
   --transition-base: 0.3s ease;
   --transition-slow: 0.5s ease;

   /* === LAYOUT === */
   --container-max: 1200px;
   --header-height: 80px;

   /* === BREAKPOINTS (pour JavaScript) === */
   --breakpoint-mobile: 768px;
   --breakpoint-tablet: 1024px;
}

/* === BREAKPOINTS MEDIA QUERIES === */
/* Mobile: < 768px */
/* Tablet: 768px - 1024px */
/* Desktop: > 1024px */