/**
 * Imagilire Bulle - Variables CSS
 * Charte graphique alignée sur l'écosystème Imagilire
 * Version: 1.0.0
 */

:root {
    /* ===== COULEURS PRINCIPALES IMAGILIRE ===== */
    --primary-color: #36B1B3;
    --primary-hover: #2a9496;
    --primary-light: #e8f7f7;
    --secondary-color: #F7B731;
    --secondary-hover: #e5a520;
    --accent-color: #D4542D;
    --accent-hover: #b8431f;
    
    /* ===== COULEURS MODULES BULLE ===== */
    /* Module Sérénité - Tons apaisants */
    --serenite-primary: #7B68EE;
    --serenite-secondary: #9B8DFF;
    --serenite-light: #F0EDFF;
    --serenite-gradient: linear-gradient(135deg, #7B68EE 0%, #9B8DFF 100%);
    
    /* Module Bibliothèque - Tons studieux */
    --bibliotheque-primary: #36B1B3;
    --bibliotheque-secondary: #4ECDC4;
    --bibliotheque-light: #E8F7F7;
    --bibliotheque-gradient: linear-gradient(135deg, #36B1B3 0%, #4ECDC4 100%);
    
    /* Module Passeport - Tons officiels */
    --passeport-primary: #F7B731;
    --passeport-secondary: #FFD166;
    --passeport-light: #FFF8E6;
    --passeport-gradient: linear-gradient(135deg, #F7B731 0%, #FFD166 100%);
    
    /* ===== COULEURS SYSTÈME ===== */
    --background-color: #F5F7FA;
    --background-secondary: #EDF2F7;
    --surface-color: #FFFFFF;
    --surface-elevated: #FFFFFF;
    --border-color: #E0E5EC;
    --border-light: #F0F3F8;
    
    /* ===== COULEURS TEXTE ===== */
    --text-primary: #2D3748;
    --text-secondary: #4A5568;
    --text-muted: #718096;
    --text-light: #A0AEC0;
    --text-inverse: #FFFFFF;
    
    /* ===== COULEURS ÉMOTIONS (Météo intérieure) ===== */
    --mood-excellent: #48BB78;
    --mood-good: #68D391;
    --mood-neutral: #F7B731;
    --mood-difficult: #F6AD55;
    --mood-hard: #FC8181;
    
    /* ===== COULEURS SYLLABATION ===== */
    --syllabe-rouge: #E74C3C;
    --syllabe-bleu: #3498DB;
    --syllabe-vert: #2ECC71;
    --syllabe-violet: #9B59B6;
    --syllabe-orange: #F39C12;
    --lettre-muette: #95A5A6;
    
    /* ===== COULEURS FEEDBACK ===== */
    --success-color: #48BB78;
    --success-light: #C6F6D5;
    --warning-color: #F7B731;
    --warning-light: #FEFCBF;
    --error-color: #FC8181;
    --error-light: #FED7D7;
    --info-color: #36B1B3;
    --info-light: #E8F7F7;
    
    /* ===== OMBRES ===== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    
    /* ===== TYPOGRAPHIE ===== */
    --font-family-base: 'Lexend', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-family-reading: 'Andika', 'Lexend', sans-serif;
    --font-family-dyslexic: 'Open-Dyslexic', 'Andika', sans-serif;
    
    /* Tailles de police responsive */
    --font-size-xs: clamp(0.75rem, 2vw, 0.75rem);
    --font-size-sm: clamp(0.8125rem, 2.2vw, 0.875rem);
    --font-size-base: clamp(0.9375rem, 2.5vw, 1rem);
    --font-size-lg: clamp(1.0625rem, 2.8vw, 1.125rem);
    --font-size-xl: clamp(1.1875rem, 3vw, 1.25rem);
    --font-size-2xl: clamp(1.375rem, 3.5vw, 1.5rem);
    --font-size-3xl: clamp(1.625rem, 4vw, 1.875rem);
    --font-size-4xl: clamp(2rem, 5vw, 2.25rem);
    
    --line-height-tight: 1.25;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;
    
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    
    /* ===== ESPACEMENT ===== */
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    
    /* ===== BORDURES ===== */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-slower: 500ms ease;
    
    /* ===== LAYOUT ===== */
    --header-height: 60px;
    --nav-height: 70px;
    --content-max-width: 800px;
    --card-max-width: 400px;
    
    /* ===== Z-INDEX ===== */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-toast: 600;
    --z-tooltip: 700;
    --z-splash: 1000;
}

/* ===== MODE SOMBRE (préparation) ===== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --background-color: #1A202C;
        --surface-color: #2D3748;
        --surface-elevated: #4A5568;
        --border-color: #4A5568;
        --border-light: #2D3748;
        
        --text-primary: #F7FAFC;
        --text-secondary: #E2E8F0;
        --text-muted: #A0AEC0;
        --text-light: #718096;
    }
}

:root[data-theme="dark"] {
    --background-color: #1A202C;
    --background-secondary: #111827;
    --surface-color: #2D3748;
    --surface-elevated: #4A5568;
    --border-color: #4A5568;
    --border-light: #2D3748;
    
    --text-primary: #F7FAFC;
    --text-secondary: #E2E8F0;
    --text-muted: #A0AEC0;
    --text-light: #718096;
}

/* ===== CLASSES UTILITAIRES POUR POLICES ===== */
.font-base { font-family: var(--font-family-base) !important; }
.font-reading { font-family: var(--font-family-reading) !important; }
.font-dyslexic { font-family: var(--font-family-dyslexic) !important; }

/* ===== TAILLES DE POLICE ACCESSIBILITÉ ===== */
body.font-size-small { font-size: 14px; }
body.font-size-medium { font-size: 16px; }
body.font-size-large { font-size: 18px; }
body.font-size-xlarge { font-size: 20px; }

/* ===== ESPACEMENT LIGNES ACCESSIBILITÉ ===== */
body.line-spacing-normal { line-height: var(--line-height-base); }
body.line-spacing-relaxed { line-height: var(--line-height-relaxed); }
body.line-spacing-loose { line-height: var(--line-height-loose); }