/* =============================================
   Variables CSS - Les Lutins de la Serva
   ============================================= */

:root {
    /* Couleurs principales - Thème ludique */
    --primary-color: #2ECC71;          /* Vert émeraude vif - nature, lutins */
    --primary-light: #58D68D;          /* Vert clair lumineux */
    --primary-dark: #27AE60;           /* Vert foncé */

    /* Couleurs secondaires */
    --secondary-color: #FF6B9D;        /* Rose vif - joie, enfance */
    --secondary-light: #FF8FB3;        /* Rose clair */
    --secondary-dark: #E74C8B;         /* Rose foncé */

    /* Couleurs d'accent */
    --accent-yellow: #F39C12;          /* Orange doré - soleil, joie */
    --accent-blue: #3498DB;            /* Bleu vif - ciel */
    --accent-purple: #9B59B6;          /* Violet - créativité */
    --accent-orange: #E67E22;          /* Orange - énergie */

    /* Couleurs de texte */
    --text-dark: #2C3E50;              /* Bleu nuit pour texte */
    --text-light: #7F8C8D;             /* Gris pour texte secondaire */

    /* Couleurs de statut */
    --success-color: #2ECC71;
    --danger-color: #E74C3C;
    --warning-color: #F39C12;
    --info-color: #3498DB;

    /* Espacements */
    --spacing-xs: 3px;
    --spacing-sm: 5px;
    --spacing-md: 10px;
    --spacing-lg: 15px;
    --spacing-xl: 20px;

    /* Bordures */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 15px;
    --border-radius-full: 50%;

    /* Ombres */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 5px 15px rgba(0,0,0,0.15);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.2);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}