/* Thème Classic - Variables CSS globales COMPLÈTES */
/* Source unique de vérité pour toutes les variables du site */
/* Pas de background Pokémon - Version neutre */

/* ========== BACKGROUND CLASSIC (Pas de Pokémon) ========== */
body.theme-classic {
    /* Pas de background Pokémon pour le thème Classic de base */
    /* Utilisez Classic Red, Blue ou Green pour les variantes avec Pokémon */
    background-color: var(--background-primary);
}

:root {
    /* ========== COULEURS PRINCIPALES ========== */
    --color-primary: #9146FF;
    --color-primary-hover: #7B3AD1;
    --color-primary-dark: #6B2AB8;
    --color-success: #43B581;  /* Variable principale pour vert */
    --color-success-hover: #3BA072;
    --color-success-dark: #328761;
    --color-danger: #F04747;
    --color-danger-hover: #E03A3A;
    --color-warning: #FAA61A;
    --color-warning-hover: #E89A10;
    --color-info: #5865F2;
    --color-accent: #e53935; /* Rouge accent (utilisé dans style.css) */
    --color-accent-dark: #c62828;
    --color-accent-light: #ef5350;
    
    /* Backgrounds colorés */
    --color-error-bg: rgba(240, 71, 71, 0.1);
    --color-success-bg: rgba(67, 181, 129, 0.1);
    --color-warning-bg: rgba(250, 166, 26, 0.1);
    --color-info-bg: rgba(88, 101, 242, 0.1);
    --color-secondary-bg: rgba(67, 181, 129, 0.1);
    --background-success: #eafbe7;
    --background-danger: #fff0f0;
    
    /* Variations d'accent */
    --color-accent-hover: #b71c1c;
    --color-accent-shadow: #e5393533;
    
    /* ========== VALEURS RGB/RGBA POUR TRANSPARENCE ========== */
    /* Couleurs noires avec transparence (ombres, overlays) */
    --shadow-xs: rgba(0, 0, 0, 0.05);
    --shadow-sm: rgba(0, 0, 0, 0.1);
    --shadow-md: rgba(0, 0, 0, 0.2);
    --shadow-lg: rgba(0, 0, 0, 0.3);
    --shadow-xl: rgba(0, 0, 0, 0.4);
    --shadow-2xl: rgba(0, 0, 0, 0.5);
    --shadow-3xl: rgba(0, 0, 0, 0.6);
    --shadow-4xl: rgba(0, 0, 0, 0.8);
    
    /* Couleurs blanches avec transparence (effets de lumière) */
    --overlay-light-xs: rgba(255, 255, 255, 0.05);
    --overlay-light-sm: rgba(255, 255, 255, 0.1);
    --overlay-light-md: rgba(255, 255, 255, 0.15);
    --overlay-light-lg: rgba(255, 255, 255, 0.2);
    --overlay-light-xl: rgba(255, 255, 255, 0.3);
    
    /* Couleurs d'accent avec transparence */
    --accent-overlay-xs: rgba(229, 57, 53, 0.05);
    --accent-overlay-sm: rgba(229, 57, 53, 0.1);
    --accent-overlay-md: rgba(229, 57, 53, 0.2);
    --accent-overlay-lg: rgba(229, 57, 53, 0.3);
    --accent-overlay-xl: rgba(229, 57, 53, 0.4);
    --accent-overlay-2xl: rgba(229, 57, 53, 0.6);
    --accent-overlay-3xl: rgba(229, 57, 53, 0.8);
    
    /* Primary avec transparence */
    --primary-overlay-xs: rgba(145, 70, 255, 0.02);
    --primary-overlay-sm: rgba(145, 70, 255, 0.05);
    --primary-overlay-md: rgba(145, 70, 255, 0.1);
    --primary-overlay-lg: rgba(145, 70, 255, 0.15);
    --primary-overlay-xl: rgba(145, 70, 255, 0.2);
    
    /* Or/Gold avec transparence */
    --gold-overlay-xs: rgba(255, 215, 0, 0.05);
    --gold-overlay-sm: rgba(255, 215, 0, 0.1);
    --gold-overlay-md: rgba(255, 215, 0, 0.15);
    --gold-overlay-lg: rgba(255, 215, 0, 0.2);
    
    /* Variables Auth (pour page de connexion) */
    --auth-bg: #1a2332;
    --auth-card-bg: #22304a;
    --auth-title: #ff5e7e;
    --auth-text: #fff;
    --auth-border: #9146FF;
    --auth-btn-bg: #9146FF;
    --auth-btn-hover: #772ce8;
    --auth-shadow: rgba(0, 0, 0, 0.3);
    
    /* Backgrounds avec transparence */
    --bg-overlay-xs: rgba(35, 35, 39, 0.5);
    --bg-overlay-sm: rgba(35, 35, 39, 0.7);
    --bg-overlay-md: rgba(35, 35, 39, 0.8);
    --bg-overlay-lg: rgba(35, 35, 39, 0.9);
    --bg-overlay-xl: rgba(35, 35, 39, 0.95);
    
    /* ========== CONFIGURATION BACKGROUND POKÉMON ========== */
    --pokemon-bg-opacity: 0.05;  /* Opacité de la silhouette (ajustable par thème) */
    --pokemon-bg-size: 64px;     /* Taille de la silhouette */
    --custom-bg-url: none;       /* URL de background personnalisé (défini par JS) */
    
    /* Couleurs utilitaires */
    --color-black: #181818;  /* Variable principale pour noir */
    --color-white: #fff;     /* Variable principale pour blanc */
    --color-grey: #ADADB8;
    --color-grey-dark: #232323;  /* Variable principale pour gris foncé */
    --color-grey-hover: #BDBDBD;
    --color-gold: #FFD700;
    --color-gold-hover: #E6C200;
    --color-silver: #C0C0C0;
    --color-bronze: #CD7F32;
    --color-hover: #2a2a2a;
    --color-green: #22C55E;
    --color-dark: #1A1A1A;

    /* ========== RARETÉS ========== */
    --rarity-1: #6B7280;
    --rarity-2: #3B82F6;
    --rarity-3: #8B5CF6;
    --rarity-4: #F59E0B;
    --rarity-5: #EF4444;
    --rarity-6: #7F1D1D;
    --rarity-7: #DB2777;
    
    /* Aliases pour -color */
    --rarity-1-color: #6B7280;
    --rarity-2-color: #3B82F6;
    --rarity-3-color: #8B5CF6;
    --rarity-4-color: #F59E0B;
    --rarity-5-color: #EF4444;
    --rarity-6-color: #7F1D1D;
    --rarity-7-color: #DB2777;

    /* ========== COULEURS DE FOND ========== */
    --background-primary: #2D2D35;
    --background-secondary: #232327;
    --background-tertiary: #1E1E22;
    --color-bg-secondary: #c2c2c2;  /* Utilisé pour mode clair */
    --color-light-card: #f8f8f8;    /* Fond carte mode clair */
    --color-background-light: #3D3D45;  /* Background clair */
    
    /* Bordures et ombres */
    --color-border: rgba(255,255,255,0.1);
    --color-shadow: rgba(0, 0, 0, 0.2);
    --color-shadow-dark: rgba(0,0,0,0.18);
    --color-shadow-light: rgba(255,255,255,0.5);
    
    /* RGB pour manipulation (ex: rgb(var(--color-accent-rgb) / 0.5)) */
    --color-accent-rgb: 229, 57, 53;

    /* ========== COULEURS DE TEXTE ========== */
    --text-color-primary: #FFFFFF;
    --text-color-secondary: #B9BBBE;
    --text-color-dark: #232327;
    --text-color-muted: #808080;

    /* ========== BORDURES ========== */
    --border-color: #40444B;
    --border-color-light: #60646B;
    --border-color-hover: #50545B;
    --border-radius: 8px;

    /* ========== ESPACEMENTS ========== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;

    /* ========== TYPOGRAPHIE ========== */
    --font-size-small: 0.875rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;

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

    /* ========== OMBRES ========== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 10px 40px rgba(0, 0, 0, 0.2);
    --text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    
    /* Ombres colorées */
    --shadow-primary: 0 0 0 3px rgba(145, 70, 255, 0.1);
    --shadow-accent: 0 10px 40px rgba(229, 57, 53, 0.3);
    --shadow-accent-md: 0 6px 20px rgba(229, 57, 53, 0.4);
    --shadow-accent-sm: 0 4px 15px rgba(229, 57, 53, 0.4);

    /* ========== TRANSITIONS ========== */
    --transition-fast: 0.15s;
    --transition-medium: 0.3s;
    --transition-slow: 0.5s;
    --transition-speed: 0.3s; /* Alias */
    
    /* ========== GRADIENTS ========== */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary));
    --gradient-success: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    --gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-accent-hover) 100%);
    --gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, #d97706 100%);
    --gradient-info: linear-gradient(135deg, var(--color-info), #2563eb);
    --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent));
    --gradient-grey: linear-gradient(135deg, #9ca3af, #6b7280);
}

/* ========== CLASSES UTILITAIRES ========== */

/* Effets de rareté avec glow */
.rarity-1.rarity-glow { 
    box-shadow: 0 0 16px 4px var(--rarity-1), 0 2px 12px 0 var(--color-shadow-dark); 
    --rarity-glow-color: var(--rarity-1); 
}
.rarity-2.rarity-glow { 
    box-shadow: 0 0 16px 4px var(--rarity-2), 0 2px 12px 0 var(--color-shadow-dark); 
    --rarity-glow-color: var(--rarity-2); 
}
.rarity-3.rarity-glow { 
    box-shadow: 0 0 16px 4px var(--rarity-3), 0 2px 12px 0 var(--color-shadow-dark); 
    --rarity-glow-color: var(--rarity-3); 
}
.rarity-4.rarity-glow { 
    box-shadow: 0 0 16px 4px var(--rarity-4), 0 2px 12px 0 var(--color-shadow-dark); 
    --rarity-glow-color: var(--rarity-4); 
}
.rarity-5.rarity-glow { 
    box-shadow: 0 0 16px 4px var(--rarity-5), 0 2px 12px 0 var(--color-shadow-dark); 
    --rarity-glow-color: var(--rarity-5); 
}
.rarity-6.rarity-glow { 
    box-shadow: 0 0 16px 4px var(--rarity-6), 0 2px 12px 0 var(--color-shadow-dark); 
    --rarity-glow-color: var(--rarity-6); 
}
.rarity-7.rarity-glow { 
    box-shadow: 0 0 16px 4px var(--rarity-7), 0 2px 12px 0 var(--color-shadow-dark); 
    --rarity-glow-color: var(--rarity-7); 
}

/* ========== STYLES POUR BACKGROUNDS PERSONNALISÉS ========== */
/* Les backgrounds Pokémon sont définis directement dans le CSS de chaque thème */
/* Exemple dans noctali.css: background-image: url('.../0197.png'); */

/* Fond sombre pour les thèmes avec silhouettes Pokémon */
body[data-has-pokemon-bg] {
    background-color: #101010 !important;
}

/* Style pour les backgrounds personnalisés (banner_value) */
/* L'URL est définie via la variable --custom-bg-url par JavaScript */
body[data-has-custom-bg] {
    background-image: var(--custom-bg-url);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background: unset !important;
}