/**
 * Thème Moderne 2 — variante raffinée de "moderne" (violet ABA-PROgress),
 * alignée sur la direction visuelle de la vitrine v2 : tuiles d'icônes KPI en
 * dégradé plein à icône blanche, halos de fond un peu plus présents, cartes
 * un peu plus douces. Hérite de tout "moderne" puis ajoute une couche
 * « MODERNE 2 » en fin d'overrides.css.
 * Fichiers : variables.css (ce fichier) + overrides.css (habillage, chargé en dernier).
 * style.css est hérité du thème "default" (repli automatique de themeAsset()).
 * Pour l'activer : CURRENT_THEME = 'moderne2' dans config/constants.php
 * Pour revenir à l'habillage précédent : CURRENT_THEME = 'moderne'.
 */

:root {
    /* === Couleurs Principales (violet) === */
    --color-primary: #7c3aed;
    --color-primary-dark: #6d28d9;
    --color-primary-light: #a78bfa;
    --color-primary-rgb: 124, 58, 237;

    --color-secondary: #6b7280;
    --color-success: #16a34a;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
    --color-info: #3b82f6;

    /* === Couleurs de Fond === */
    --bg-primary: #ffffff;      /* cartes */
    --bg-secondary: #f4f5fa;    /* fond de page (gris-bleuté très clair) */
    --bg-tertiary: #e9ebf3;
    --bg-dark: #141414;

    /* === Couleurs de Texte === */
    --text-primary: #0f172a;
    --text-secondary: #5b6478;
    --text-tertiary: #9ca3af;
    --text-inverse: #ffffff;

    /* === Sidebar (solide, épurée) === */
    --sidebar-bg: #ffffff;
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 80px;
    --sidebar-text: #6b7280;
    --sidebar-text-active: #7c3aed;
    --sidebar-hover-bg: rgba(0, 0, 0, 0.04);
    --sidebar-active-bg: rgba(124, 58, 237, 0.10);

    /* === Header (solide) === */
    --header-height: 70px;
    --header-bg: #ffffff;
    --header-border: #e6e8f0;

    /* === Cards (grands arrondis, ombres douces) === */
    --card-bg: #ffffff;
    --card-border: #e6e8f0;
    --card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
    --card-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.05), 0 12px 32px rgba(15, 23, 42, 0.09);

    /* === Borders / Radius === */
    --border-color: #e6e8f0;
    --border-radius: 16px;
    --border-radius-sm: 10px;
    --border-radius-lg: 22px;

    /* Alias utilisés dans style.css */
    --radius-md: var(--border-radius);
    --radius-lg: var(--border-radius-lg);
    --shadow-md: var(--card-shadow);
    --shadow-lg: var(--card-shadow-hover);

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

    /* === Typography === */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;

    /* === Transitions === */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* === Z-index === */
    --z-sidebar: 1000;
    --z-header: 999;
    --z-dropdown: 1001;
    --z-modal: 1002;
    --z-tooltip: 1003;

    /* === Surface / Fond (langage Donezo) ===
       Fond uni gris clair (pas de dégradé), surfaces solides (pas de givré). */
    --input-border: #d5d9e5;
    --page-bg: #f4f5fa;
    /* Maillage doux : violet en haut à gauche, bleu en bas à droite (les halos animés viennent par-dessus) */
    --page-bg-image:
        radial-gradient(ellipse 55% 48% at 2% 0%,     rgba(124, 58, 237, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 50% 45% at 100% 28%,  rgba(59, 130, 246, 0.09) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 82% 100%,  rgba(124, 58, 237, 0.07) 0%, transparent 62%);
    --surface-backdrop: none;
    --sidebar-border-color: #e6e8f0;
    --sidebar-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    --header-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* === Mode Sombre (violet sur gris très foncé) === */
body.dark-theme {
    --bg-primary: #1a1a1f;
    --bg-secondary: #141418;
    --bg-tertiary: #26262c;
    --bg-dark: #0a0a0c;

    --text-primary: #f4f4f5;
    --text-secondary: #c7c7cd;
    --text-tertiary: #9ca3af;

    --sidebar-bg: #1a1a1f;
    --sidebar-text: #c7c7cd;
    --sidebar-hover-bg: #26262c;
    --sidebar-active-bg: rgba(124, 58, 237, 0.22);
    --sidebar-text-active: #a78bfa;

    --header-bg: #1a1a1f;
    --header-border: #26262c;

    --card-bg: #1a1a1f;
    --card-border: #26262c;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5);

    --border-color: #26262c;
    --input-border: #3a3a42;

    /* Fond sombre uni assorti */
    --page-bg-dark: #141418;
    --page-bg-image-dark:
        radial-gradient(ellipse 55% 48% at 2% 0%,     rgba(124, 58, 237, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 50% 45% at 100% 28%,  rgba(37, 99, 235, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 82% 100%,  rgba(124, 58, 237, 0.12) 0%, transparent 62%);
    --sidebar-border-color: #26262c;
}