/* ==========================================================================
   VARIABLES CSS POUR L'HOMOGÉNÉISATION
   ========================================================================== */
:root {
    /* Palette de couleurs homogène */
    --primary-blue: #4299e1;
    --primary-blue-dark: #3182ce;
    --primary-blue-light: #90cdf4;
    --primary-blue-bg: #bee3f8;
    
    --secondary-green: #48bb78;
    --secondary-green-dark: #38a169;
    --secondary-green-light: #9ae6b4;
    
    --accent-teal: #38b2ac;
    --accent-teal-dark: #319795;
    --accent-teal-light: #81e6d9;
    
    /* Couleurs de texte - AMÉLIORATION DES CONTRASTES */
    --text-primary: #1a202c;        /* Plus foncé pour meilleur contraste */
    --text-secondary: #2d3748;      /* Maintenu - bon contraste */
    --text-muted: #4a5568;          /* Maintenu - acceptable */
    --text-light: #718096;          /* Maintenu - pour éléments secondaires */
    --text-high-contrast: #000000;  /* Noir pur pour éléments critiques */
    --text-on-dark: #ffffff;        /* Blanc pur sur fond sombre */
    
    /* Couleurs de fond */
    --bg-primary: #ffffff;
    --bg-secondary: #f7fafc;
    --bg-light: #fdfefe;
    
    /* Couleurs spécifiques */
    --white: #ffffff;
    --gray-100: #f7fafc;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e0;
    --gray-400: #a0aec0;
    --gray-500: #718096;
    --gray-600: #4a5568;
    --gray-700: #2d3748;
    --gray-800: #1a365d;
    
    /* Couleurs d'accent - NOUVELLES COULEURS CHAUDES */
    --orange-400: #f6ad55;
    --orange-500: #ed8936;
    --orange-600: #dd6b20;
    --orange-700: #c05621;
    
    /* Couleurs CTA apaisantes et professionnelles */
    --cta-primary: #4299e1;        /* Bleu apaisant pour CTA principal */
    --cta-primary-hover: #3182ce;  /* Bleu plus foncé au hover */
    --cta-secondary: #48bb78;      /* Vert apaisant pour CTA secondaires */
    --cta-accent: #38b2ac;         /* Teal doux pour accents */
    --cta-accent-hover: #319795;   /* Teal plus foncé au hover */
    
    /* Couleurs de succès et confiance */
    --success-warm: #38a169;       /* Vert chaud pour succès */
    --success-light: #68d391;      /* Vert clair pour badges */
    
    /* Couleurs neutres améliorées */
    --yellow-200: #fef3c7;
    --yellow-300: #fde68a;
    --yellow-500: #f59e0b;
    --yellow-700: #92400e;
    
    /* Bordures */
    --border-primary: 2px solid var(--primary-blue-light);
    --border-secondary: 1px solid var(--gray-200);
    --border-accent: 2px solid var(--accent-teal);
    --border-light: 1px solid var(--gray-200);
    
    /* Espacements */
    --spacing-xs: 10px;
    --spacing-sm: 15px;
    --spacing-md: 20px;
    --spacing-lg: 25px;
    --spacing-xl: 30px;
    --spacing-xxl: 40px;
    
    /* Typographie - Hiérarchie moderne et variée */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-md: 17px;
    --font-size-lg: 19px;
    --font-size-xl: 22px;
    --font-size-2xl: 26px;
    --font-size-3xl: 30px;
    --font-size-4xl: 34px;
    --font-size-5xl: 42px;
    --font-size-6xl: 50px;
    --font-size-7xl: 58px;
    --font-size-8xl: 66px;
    
    /* Poids de police pour la hiérarchie */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Polices élégantes - Cormorant Garamond pour titres, DM Sans pour corps */
    --font-family-display: 'Cormorant Garamond', Georgia, serif;
    --font-family-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-fallback: Georgia, serif;
    
    /* Espacement des lignes optimisé */
    --line-height-tight: 1.1;
    --line-height-snug: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.8;
    
    /* Rayons de bordure */
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    
    /* Ombres communes */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.1);
    --shadow-text: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Aliases pour compatibilité avec composants */
    --color-background-light: var(--bg-secondary);
    --border-radius: var(--border-radius-lg);
    --text-color: var(--text-primary);
    --primary-color: var(--primary-blue);
    
    /* Dégradés apaisants et professionnels */
    --gradient-primary: linear-gradient(135deg, var(--primary-blue), var(--accent-teal));
    --gradient-calm: linear-gradient(135deg, var(--cta-primary), var(--cta-accent));
    --gradient-soft: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
    --gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(247, 250, 252, 0.95));
    --gradient-hero: linear-gradient(135deg, rgba(66, 153, 225, 0.05), rgba(56, 178, 172, 0.05));
    
    /* Animations et transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-gentle: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-fade: opacity 0.6s ease, transform 0.6s ease;
    
    /* Encadrés colorés pour la hiérarchie visuelle */
    --highlight-blue: linear-gradient(135deg, rgba(66, 153, 225, 0.1), rgba(66, 153, 225, 0.05));
    --highlight-green: linear-gradient(135deg, rgba(72, 187, 120, 0.1), rgba(72, 187, 120, 0.05));
    --highlight-teal: linear-gradient(135deg, rgba(56, 178, 172, 0.1), rgba(56, 178, 172, 0.05));
    --highlight-warm: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05));
    
    /* Container max width */
    --container-max-width: 1000px;
}