/* ═══════════════════════════════════════════════════════════════════════════
   CLINDOO - VARIABLES CSS
   Fichier : CSS_Variables.css
   ═══════════════════════════════════════════════════════════════════════════
   
   Ce fichier contient toutes les variables CSS utilisées dans Clindoo.
   À charger EN PREMIER avant tout autre CSS.
   
   Ordre de chargement recommandé :
   1. CSS_Variables.css (ce fichier)
   2. CSS_Global.css
   3. CSS_[Categorie].css (selon la page)
   
   ═══════════════════════════════════════════════════════════════════════════
*/

:root {
    /* ═══════════════════════════════════════════════════════════════════════
       COULEURS PRINCIPALES PAR CATÉGORIE
       ═══════════════════════════════════════════════════════════════════════
       
       Ces couleurs définissent l'identité visuelle de chaque catégorie.
       Elles sont utilisées pour les boutons, cartes, bordures, etc.
    */
    
    /* Hygiène & Santé - Bleu apaisant */
    --clindoo-hygiene-primary: #4A90E2;
    --clindoo-hygiene-light: #7BB3F0;
    --clindoo-hygiene-lighter: #E3F2FD;
    --clindoo-hygiene-bg: #f0f9ff;
    
    /* Apprentissage - Vert croissance */
    --clindoo-apprentissage-primary: #10B981;
    --clindoo-apprentissage-light: #34D399;
    --clindoo-apprentissage-lighter: #D1FAE5;
    --clindoo-apprentissage-bg: #f0fdf4;
    
    /* Autonomie - Orange énergique */
    --clindoo-autonomie-primary: #FF8C42;
    --clindoo-autonomie-light: #FFB380;
    --clindoo-autonomie-lighter: #FFF3E0;
    --clindoo-autonomie-bg: #fff7ed;
    
    /* Social - Violet connexion */
    --clindoo-social-primary: #9333EA;
    --clindoo-social-light: #A855F7;
    --clindoo-social-lighter: #F3E8FF;
    --clindoo-social-bg: #faf5ff;
    
    /* ═══════════════════════════════════════════════════════════════════════
       COULEURS SYSTÈME
       ═══════════════════════════════════════════════════════════════════════
       
       Couleurs utilisées dans toute l'application indépendamment
       de la catégorie (messages, états, éléments d'interface)
    */
    
    /* Couleurs d'état */
    --clindoo-success: #10B981;
    --clindoo-success-light: #D1FAE5;
    --clindoo-error: #EF4444;
    --clindoo-error-light: #FEE2E2;
    --clindoo-warning: #F59E0B;
    --clindoo-warning-light: #FEF3C7;
    --clindoo-info: #3B82F6;
    --clindoo-info-light: #DBEAFE;
    
    /* Couleurs de texte */
    --clindoo-text-primary: #1f2937;
    --clindoo-text-secondary: #6b7280;
    --clindoo-text-tertiary: #9ca3af;
    --clindoo-text-inverse: #ffffff;
    
    /* Couleurs de fond */
    --clindoo-bg-primary: #ffffff;
    --clindoo-bg-secondary: #f9fafb;
    --clindoo-bg-tertiary: #f3f4f6;
    --clindoo-bg-dark: #1a202c;
    
    /* Couleurs de bordure */
    --clindoo-border-light: #e5e7eb;
    --clindoo-border-medium: #d1d5db;
    --clindoo-border-dark: #9ca3af;
    
    /* Overlay et ombres */
    --clindoo-overlay-light: rgba(0, 0, 0, 0.1);
    --clindoo-overlay-medium: rgba(0, 0, 0, 0.3);
    --clindoo-overlay-dark: rgba(0, 0, 0, 0.5);
    --clindoo-overlay-darker: rgba(0, 0, 0, 0.7);
    
    /* ═══════════════════════════════════════════════════════════════════════
       ESPACEMENTS
       ═══════════════════════════════════════════════════════════════════════
       
       Système d'espacement cohérent basé sur des multiples de 4px
    */
    
    --clindoo-space-xs: 0.25rem;    /* 4px */
    --clindoo-space-sm: 0.5rem;     /* 8px */
    --clindoo-space-md: 0.75rem;    /* 12px */
    --clindoo-space-lg: 1rem;       /* 16px */
    --clindoo-space-xl: 1.5rem;     /* 24px */
    --clindoo-space-2xl: 2rem;      /* 32px */
    --clindoo-space-3xl: 3rem;      /* 48px */
    --clindoo-space-4xl: 4rem;      /* 64px */
    
    /* ═══════════════════════════════════════════════════════════════════════
       TYPOGRAPHIE
       ═══════════════════════════════════════════════════════════════════════
    */
    
    /* Famille de polices */
    --clindoo-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    /* Tailles de police */
    --clindoo-font-xs: 0.75rem;     /* 12px */
    --clindoo-font-sm: 0.875rem;    /* 14px */
    --clindoo-font-base: 1rem;      /* 16px */
    --clindoo-font-lg: 1.125rem;    /* 18px */
    --clindoo-font-xl: 1.25rem;     /* 20px */
    --clindoo-font-2xl: 1.5rem;     /* 24px */
    --clindoo-font-3xl: 1.875rem;   /* 30px */
    --clindoo-font-4xl: 2.25rem;    /* 36px */
    
    /* Poids de police */
    --clindoo-font-normal: 400;
    --clindoo-font-medium: 500;
    --clindoo-font-semibold: 600;
    --clindoo-font-bold: 700;
    
    /* Hauteur de ligne */
    --clindoo-line-height-tight: 1.25;
    --clindoo-line-height-normal: 1.5;
    --clindoo-line-height-relaxed: 1.75;
    
    /* ═══════════════════════════════════════════════════════════════════════
       BORDURES ET ARRONDIS
       ═══════════════════════════════════════════════════════════════════════
    */
    
    /* Radius (arrondis) */
    --clindoo-radius-sm: 0.25rem;   /* 4px */
    --clindoo-radius-md: 0.5rem;    /* 8px */
    --clindoo-radius-lg: 0.75rem;   /* 12px */
    --clindoo-radius-xl: 1rem;      /* 16px */
    --clindoo-radius-2xl: 1.5rem;   /* 24px */
    --clindoo-radius-full: 9999px;  /* Complètement rond */
    
    /* Épaisseur de bordure */
    --clindoo-border-thin: 1px;
    --clindoo-border-medium: 2px;
    --clindoo-border-thick: 3px;
    
    /* ═══════════════════════════════════════════════════════════════════════
       OMBRES (BOX-SHADOW)
       ═══════════════════════════════════════════════════════════════════════
       
       Ombres douces et bienveillantes conformes à l'esprit Clindoo
    */
    
    --clindoo-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --clindoo-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --clindoo-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --clindoo-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --clindoo-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --clindoo-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Ombres avec couleur de catégorie (définies dynamiquement) */
    --clindoo-shadow-category-sm: 0 1px 3px 0 rgba(var(--category-rgb), 0.1);
    --clindoo-shadow-category-md: 0 4px 6px -1px rgba(var(--category-rgb), 0.15);
    --clindoo-shadow-category-lg: 0 10px 15px -3px rgba(var(--category-rgb), 0.2);
    
    /* ═══════════════════════════════════════════════════════════════════════
       TRANSITIONS ET ANIMATIONS
       ═══════════════════════════════════════════════════════════════════════
    */
    
    /* Durées */
    --clindoo-duration-fast: 150ms;
    --clindoo-duration-base: 300ms;
    --clindoo-duration-slow: 500ms;
    
    /* Easing (courbes de transition) */
    --clindoo-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --clindoo-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --clindoo-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --clindoo-ease-smooth: ease;
    
    /* Transitions complètes pré-configurées */
    --clindoo-transition-fast: all var(--clindoo-duration-fast) var(--clindoo-ease-out);
    --clindoo-transition-base: all var(--clindoo-duration-base) var(--clindoo-ease-out);
    --clindoo-transition-slow: all var(--clindoo-duration-slow) var(--clindoo-ease-out);
    
    /* ═══════════════════════════════════════════════════════════════════════
       Z-INDEX (SUPERPOSITION)
       ═══════════════════════════════════════════════════════════════════════
       
       Hiérarchie des éléments en Z pour éviter les conflits
    */
    
    --clindoo-z-base: 1;
    --clindoo-z-dropdown: 10;
    --clindoo-z-sticky: 20;
    --clindoo-z-fixed: 30;
    --clindoo-z-sidebar: 40;
    --clindoo-z-modal-backdrop: 50;
    --clindoo-z-modal: 60;
    --clindoo-z-popup: 70;
    --clindoo-z-tooltip: 80;
    --clindoo-z-notification: 90;
    --clindoo-z-max: 9999;
    
    /* ═══════════════════════════════════════════════════════════════════════
       BREAKPOINTS (RESPONSIVE)
       ═══════════════════════════════════════════════════════════════════════
       
       Points de rupture pour le design responsive
       Note: CSS ne supporte pas les media queries dans les variables,
       mais ces valeurs servent de référence
    */
    
    --clindoo-breakpoint-xs: 400px;
    --clindoo-breakpoint-sm: 480px;
    --clindoo-breakpoint-md: 640px;
    --clindoo-breakpoint-lg: 768px;
    --clindoo-breakpoint-xl: 1024px;
    --clindoo-breakpoint-2xl: 1200px;
    --clindoo-breakpoint-3xl: 1400px;
    
    /* ═══════════════════════════════════════════════════════════════════════
       DIMENSIONS COMMUNES
       ═══════════════════════════════════════════════════════════════════════
    */
    
    /* Largeurs de conteneur */
    --clindoo-container-xs: 480px;
    --clindoo-container-sm: 640px;
    --clindoo-container-md: 768px;
    --clindoo-container-lg: 1024px;
    --clindoo-container-xl: 1280px;
    --clindoo-container-2xl: 1536px;
    
    /* Hauteurs communes */
    --clindoo-header-height: 64px;
    --clindoo-footer-height: 80px;
    --clindoo-sidebar-width: 280px;
    --clindoo-button-height-sm: 32px;
    --clindoo-button-height-md: 40px;
    --clindoo-button-height-lg: 48px;
    --clindoo-input-height: 44px;
    
    /* ═══════════════════════════════════════════════════════════════════════
       VALEURS RGB DES COULEURS PRINCIPALES
       ═══════════════════════════════════════════════════════════════════════
       
       Versions RGB des couleurs pour utiliser avec rgba()
       Exemple: rgba(var(--clindoo-hygiene-rgb), 0.5)
    */
    
    --clindoo-hygiene-rgb: 74, 144, 226;
    --clindoo-apprentissage-rgb: 16, 185, 129;
    --clindoo-autonomie-rgb: 255, 140, 66;
   --clindoo-social-rgb: 147, 51, 234;
    
    /* ═══════════════════════════════════════════════════════════════════════
       ALIASES DE COMPATIBILITÉ
       ═══════════════════════════════════════════════════════════════════════
       
       Aliases pour la rétrocompatibilité avec l'ancien code
    */
    
    --color-primary-blue: var(--clindoo-hygiene-primary);
    --color-green: var(--clindoo-success);
    --color-orange: var(--clindoo-autonomie-primary);
    --color-red: var(--clindoo-error);
    --color-yellow: var(--clindoo-warning);
}

/* ═══════════════════════════════════════════════════════════════════════════
   VARIABLES SPÉCIFIQUES PAR CATÉGORIE
   ═══════════════════════════════════════════════════════════════════════════
   
   Ces classes permettent de définir quelle catégorie est active
   et d'appliquer automatiquement les bonnes couleurs
   
   Usage: Ajouter une de ces classes au <body> ou au conteneur principal
   Exemple: <body class="clindoo-category-hygiene">
*/

/* Catégorie Hygiène & Santé */
.clindoo-category-hygiene,
body.category-hygiene {
    --category-primary: var(--clindoo-hygiene-primary);
    --category-light: var(--clindoo-hygiene-light);
    --category-lighter: var(--clindoo-hygiene-lighter);
    --category-bg: var(--clindoo-hygiene-bg);
    --category-rgb: var(--clindoo-hygiene-rgb);
}

/* Catégorie Apprentissage */
.clindoo-category-apprentissage,
body.category-apprentissage {
    --category-primary: var(--clindoo-apprentissage-primary);
    --category-light: var(--clindoo-apprentissage-light);
    --category-lighter: var(--clindoo-apprentissage-lighter);
    --category-bg: var(--clindoo-apprentissage-bg);
    --category-rgb: var(--clindoo-apprentissage-rgb);
}

/* Catégorie Autonomie */
.clindoo-category-autonomie,
body.category-autonomie {
    --category-primary: var(--clindoo-autonomie-primary);
    --category-light: var(--clindoo-autonomie-light);
    --category-lighter: var(--clindoo-autonomie-lighter);
    --category-bg: var(--clindoo-autonomie-bg);
    --category-rgb: var(--clindoo-autonomie-rgb);
}

/* Catégorie Social */
.clindoo-category-social,
body.category-social {
    --category-primary: var(--clindoo-social-primary);
    --category-light: var(--clindoo-social-light);
    --category-lighter: var(--clindoo-social-lighter);
    --category-bg: var(--clindoo-social-bg);
    --category-rgb: var(--clindoo-social-rgb);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIN DU FICHIER CSS_Variables.css
   ═══════════════════════════════════════════════════════════════════════════
*/