/**
 * WISTIFI - Variables CSS de Thème
 * Configuration centralisée des couleurs et styles
 * Modifiable dynamiquement via l'interface d'administration
 */

:root {
    /* ===== COULEURS PRINCIPALES ===== */
    --color-primary: #9333ea;           /* purple-600 */
    --color-primary-hover: #7e22ce;     /* purple-700 */
    --color-primary-light: #c084fc;     /* purple-400 */
    --color-primary-dark: #6b21a8;      /* purple-800 */
    
    /* ===== COULEURS SECONDAIRES ===== */
    --color-secondary: #2563eb;         /* blue-600 */
    --color-secondary-hover: #1d4ed8;   /* blue-700 */
    --color-secondary-light: #60a5fa;   /* blue-400 */
    
    /* ===== DÉGRADÉS ===== */
    --gradient-primary: linear-gradient(135deg, var(--color-secondary-light) 0%, var(--color-primary-light) 100%);
    --gradient-hero: linear-gradient(135deg, #2563eb 0%, #9333ea 100%);
    
    /* ===== ÉTATS ===== */
    --color-success: #16a34a;           /* green-600 */
    --color-warning: #ca8a04;           /* yellow-600 */
    --color-error: #dc2626;             /* red-600 */
    --color-info: #0284c7;              /* sky-600 */
    
    /* ===== TYPOGRAPHIE ===== */
    --font-family: 'Inter', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.5;
    
    /* ===== ESPACEMENTS ===== */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    
    /* ===== BORDURES ===== */
    --border-radius-sm: 0.375rem;   /* 6px */
    --border-radius-md: 0.5rem;     /* 8px */
    --border-radius-lg: 0.75rem;    /* 12px */
    --border-radius-xl: 1rem;       /* 16px */
    
    /* ===== OMBRES ===== */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    
    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
}

/* ===== CLASSES UTILITAIRES AVEC VARIABLES ===== */

/* Boutons */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    transition: background-color var(--transition-base);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

/* Liens */
.link-primary {
    color: var(--color-primary);
    transition: color var(--transition-fast);
}

.link-primary:hover {
    color: var(--color-primary-hover);
}

/* Dégradés */
.gradient-primary {
    background: var(--gradient-primary);
}

.gradient-hero {
    background: var(--gradient-hero);
}

/* Dégradé pour logo texte */
.logo-gradient {
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Dégradé pour hero section */
.hero-bg {
    background-color: var(--color-secondary);
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Dégradé pour cartes événements */
.event-gradient {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-secondary-light) 100%);
}

/* Badges de statut */
.badge-success {
    background-color: var(--color-success);
    color: white;
}

.badge-warning {
    background-color: var(--color-warning);
    color: white;
}

.badge-error {
    background-color: var(--color-error);
    color: white;
}

.badge-info {
    background-color: var(--color-info);
    color: white;
}

/* Classes utilitaires pour Tailwind avec variables CSS */
.text-primary {
    color: var(--color-primary);
}

.bg-primary {
    background-color: var(--color-primary);
}

.border-primary {
    border-color: var(--color-primary);
}

.hover\:text-primary:hover {
    color: var(--color-primary);
}

.focus\:ring-primary:focus {
    --tw-ring-color: var(--color-primary);
}

/* Sidebar gradient - Utilise les variables CSS du thème */
.sidebar-gradient {
    background: var(--gradient-hero);
    transition: background var(--transition-base);
}

/* Welcome message gradient - Dashboard */
.welcome-gradient {
    background: var(--gradient-hero);
    transition: background var(--transition-base);
}

/* Texte couleur primaire pour boutons sur fond blanc */
.btn-primary-text {
    color: var(--color-primary);
    transition: color var(--transition-base);
}

.btn-primary-text:hover {
    color: var(--color-primary-hover);
}

/* ===== THÈMES ALTERNATIFS ===== */
/* Pour activer : ajouter class="theme-*" sur <html> ou <body> */

/* Thème Océan */
html.theme-ocean,
body.theme-ocean {
    --color-primary: #0891b2;           /* cyan-600 */
    --color-primary-hover: #0e7490;     /* cyan-700 */
    --color-primary-light: #22d3ee;     /* cyan-400 */
    --color-secondary: #0284c7;         /* sky-600 */
    --color-secondary-hover: #0369a1;   /* sky-700 */
    --gradient-hero: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);
}

/* Thème Vert Nature */
html.theme-nature,
body.theme-nature {
    --color-primary: #16a34a;           /* green-600 */
    --color-primary-hover: #15803d;     /* green-700 */
    --color-primary-light: #4ade80;     /* green-400 */
    --color-secondary: #059669;         /* emerald-600 */
    --color-secondary-hover: #047857;   /* emerald-700 */
    --gradient-hero: linear-gradient(135deg, #059669 0%, #16a34a 100%);
}

/* Thème Orange Énergie */
html.theme-energy,
body.theme-energy {
    --color-primary: #ea580c;           /* orange-600 */
    --color-primary-hover: #c2410c;     /* orange-700 */
    --color-primary-light: #fb923c;     /* orange-400 */
    --color-secondary: #dc2626;         /* red-600 */
    --color-secondary-hover: #b91c1c;   /* red-700 */
    --gradient-hero: linear-gradient(135deg, #dc2626 0%, #ea580c 100%);
}