/**
 * REM'S CONTENT AI - DESIGN SYSTEM v3.0
 * Système de design moderne avec couleurs personnalisables
 * Les couleurs peuvent être surchargées via l'admin du plugin
 */

:root {
    /* === COULEURS PRINCIPALES (personnalisables via admin) === */
    --rems-primary: #0f172a;           /* Bleu Nuit - Titres, Headers */
    --rems-accent: #6366f1;            /* Indigo - Accent principal */
    --rems-accent-light: #818cf8;      /* Indigo clair - Hover */
    --rems-accent-bg: #eef2ff;         /* Indigo très léger - Background accent */
    
    /* === COULEURS SÉMANTIQUES === */
    --rems-success: #10b981;           /* Émeraude - Victoire, positif */
    --rems-warning: #f59e0b;           /* Ambre - Nul, attention */
    --rems-danger: #ef4444;            /* Rouge - Défaite, négatif */
    --rems-info: #3b82f6;             /* Bleu - Info, team B */
    
    /* === FONDS === */
    --rems-bg: #f8fafc;               /* Gris ultra léger */
    --rems-bg-alt: #f1f5f9;           /* Gris léger alternatif */
    --rems-white: #ffffff;
    
    /* === BORDURES & TEXTES === */
    --rems-border: #e2e8f0;
    --rems-border-light: #f1f5f9;
    --rems-text-primary: #0f172a;
    --rems-text-secondary: #475569;
    --rems-text-muted: #94a3b8;
    --rems-secondary: #0f172a;         /* Alias */
    
    /* === TEAM COLORS (dans les comparaisons) === */
    --rems-team-a: #1a56db;            /* Bleu pour team A (domicile) */
    --rems-team-b: #ea580c;            /* Orange pour team B (extérieur) */
    
    /* === ZONES CLASSEMENT === */
    --rems-zone-champions: #10b981;
    --rems-zone-europa: #3b82f6;
    --rems-zone-conference: #8b5cf6;
    --rems-zone-relegation: #ef4444;
    
    /* Anciens alias pour compatibilité */
    --rems-green: var(--rems-success);
    --rems-primary-light: var(--rems-accent-light);
    
    /* === TYPOGRAPHIE === */
    --rems-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* === ESPACEMENTS === */
    --rems-radius-sm: 8px;
    --rems-radius-md: 12px;
    --rems-radius-lg: 16px;
    --rems-radius-xl: 20px;
    --rems-radius: 12px;
    --rems-spacing: 1.5rem;
    
    /* === OMBRES === */
    --rems-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --rems-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --rems-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
    --rems-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
    --rems-shadow: var(--rems-shadow-md);
}

/* === BADGES === */
.rems-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    line-height: 1;
}

.rems-badge-success { background: var(--rems-success); color: white; }
.rems-badge-warning { background: var(--rems-warning); color: white; }
.rems-badge-danger { background: var(--rems-danger); color: white; }
.rems-badge-info { background: var(--rems-info); color: white; }
.rems-badge-secondary { background: #6b7280; color: white; }

/* === ANIMATIONS === */
@keyframes fillBar {
    from { width: 0%; opacity: 0.5; }
    to { width: var(--target-width); opacity: 1; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes remsSlideUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes remsCountUp {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes remsPulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }
}

.rems-stat-bar-fill {
    animation: fillBar 1.2s ease-out forwards;
    transition: all 0.3s ease;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    :root {
        --rems-radius-xl: 16px;
        --rems-radius-lg: 12px;
        --rems-radius-md: 8px;
    }
}