/**
 * ============================================
 * SYSTÈME DE DESIGN VURTO.AI - VARIABLES CSS
 * ============================================
 * 
 * Ce fichier contient toutes les variables CSS du système de design.
 * Modifier ces variables permet de changer l'apparence de toute l'application.
 * 
 * IMPORTANT : Pour changer la palette de couleurs, modifiez uniquement les variables
 * dans la section "COULEURS PRINCIPALES" ci-dessous.
 */

:root {
    /* ============================================
       COULEURS PRINCIPALES
       ============================================
       Modifiez ces valeurs pour changer la palette de couleurs de l'application
    */
    
    /* Couleur primaire (bleu principal) */
    --ds-color-primary: #6366f1;
    --ds-color-primary-light: #818cf8;
    --ds-color-primary-dark: #4f46e5;
    --ds-color-primary-50: #eef2ff;
    --ds-color-primary-100: #e0e7ff;
    --ds-color-primary-200: #c7d2fe;
    --ds-color-primary-300: #a5b4fc;
    --ds-color-primary-400: #818cf8;
    --ds-color-primary-500: #6366f1;
    --ds-color-primary-600: #4f46e5;
    --ds-color-primary-700: #4338ca;
    --ds-color-primary-800: #3730a3;
    --ds-color-primary-900: #312e81;
    
    /* Couleur secondaire (violet) */
    --ds-color-secondary: #8b5cf6;
    --ds-color-secondary-light: #a78bfa;
    --ds-color-secondary-dark: #7c3aed;
    --ds-color-secondary-50: #faf5ff;
    --ds-color-secondary-100: #f3e8ff;
    --ds-color-secondary-200: #e9d5ff;
    --ds-color-secondary-300: #d8b4fe;
    --ds-color-secondary-400: #c084fc;
    --ds-color-secondary-500: #a855f7;
    --ds-color-secondary-600: #9333ea;
    --ds-color-secondary-700: #7e22ce;
    --ds-color-secondary-800: #6b21a8;
    --ds-color-secondary-900: #581c87;
    
    /* Couleur de succès (vert) */
    --ds-color-success: #10b981;
    --ds-color-success-light: #34d399;
    --ds-color-success-dark: #059669;
    --ds-color-success-50: #ecfdf5;
    --ds-color-success-100: #d1fae5;
    --ds-color-success-200: #a7f3d0;
    --ds-color-success-300: #6ee7b7;
    --ds-color-success-400: #34d399;
    --ds-color-success-500: #10b981;
    --ds-color-success-600: #059669;
    --ds-color-success-700: #047857;
    --ds-color-success-800: #065f46;
    --ds-color-success-900: #064e3b;
    
    /* Couleur d'avertissement (orange/jaune) */
    --ds-color-warning: #f59e0b;
    --ds-color-warning-light: #fbbf24;
    --ds-color-warning-dark: #d97706;
    --ds-color-warning-50: #fffbeb;
    --ds-color-warning-100: #fef3c7;
    --ds-color-warning-200: #fde68a;
    --ds-color-warning-300: #fcd34d;
    --ds-color-warning-400: #fbbf24;
    --ds-color-warning-500: #f59e0b;
    --ds-color-warning-600: #d97706;
    --ds-color-warning-700: #b45309;
    --ds-color-warning-800: #92400e;
    --ds-color-warning-900: #78350f;
    
    /* Couleur de danger (rouge) */
    --ds-color-danger: #ef4444;
    --ds-color-danger-light: #f87171;
    --ds-color-danger-dark: #dc2626;
    --ds-color-danger-50: #fef2f2;
    --ds-color-danger-100: #fee2e2;
    --ds-color-danger-200: #fecaca;
    --ds-color-danger-300: #fca5a5;
    --ds-color-danger-400: #f87171;
    --ds-color-danger-500: #ef4444;
    --ds-color-danger-600: #dc2626;
    --ds-color-danger-700: #b91c1c;
    --ds-color-danger-800: #991b1b;
    --ds-color-danger-900: #7f1d1d;
    
    /* Couleur d'information (cyan) — décidé le 24/08/2026 comme référence unique,
       tranche le conflit avec --bs-info de Metronic (violet #7239EA, non utilisé ici) */
    --ds-color-info: #06b6d4;
    --ds-color-info-light: #22d3ee;
    --ds-color-info-dark: #0891b2;
    --ds-color-info-50: #ecfeff;
    --ds-color-info-100: #cffafe;
    --ds-color-info-200: #a5f3fc;
    --ds-color-info-300: #67e8f9;
    --ds-color-info-400: #22d3ee;
    --ds-color-info-500: #06b6d4;
    --ds-color-info-600: #0891b2;
    --ds-color-info-700: #0e7490;
    --ds-color-info-800: #155e75;
    --ds-color-info-900: #164e63;
    
    /* Couleur indigo (pour éléments premium/spéciaux) */
    --ds-color-indigo: #6366f1;
    --ds-color-indigo-light: #818cf8;
    --ds-color-indigo-dark: #4f46e5;
    
    /* Couleur rose (pour actions/tâches) */
    --ds-color-pink: #ec4899;
    --ds-color-pink-light: #f472b6;
    --ds-color-pink-dark: #db2777;
    
    /* Couleur turquoise (pour données/stats) */
    --ds-color-teal: #14b8a6;
    --ds-color-teal-light: #2dd4bf;
    --ds-color-teal-dark: #0d9488;
    
    /* ============================================
       NUANCES DE GRIS
       ============================================
    */
    --ds-color-gray-50: #f9fafb;
    --ds-color-gray-100: #f3f4f6;
    --ds-color-gray-200: #e5e7eb;
    --ds-color-gray-300: #d1d5db;
    --ds-color-gray-400: #9ca3af;
    --ds-color-gray-500: #6b7280;
    --ds-color-gray-600: #4b5563;
    --ds-color-gray-700: #374151;
    --ds-color-gray-800: #1f2937;
    --ds-color-gray-900: #111827;
    
    /* Alias pour compatibilité avec l'existant */
    --ds-color-gray-light: var(--ds-color-gray-100);
    --ds-color-gray-medium: var(--ds-color-gray-500);
    --ds-color-gray-dark: var(--ds-color-gray-700);
    
    /* ============================================
       COULEURS DE FOND
       ============================================
    */
    --ds-bg-primary: #ffffff;
    --ds-bg-secondary: #f9fafb;
    --ds-bg-tertiary: #f3f4f6;
    --ds-bg-overlay: rgba(0, 0, 0, 0.5);
    --ds-bg-overlay-light: rgba(0, 0, 0, 0.1);
    
    /* ============================================
       COULEURS DE TEXTE
       ============================================
    */
    --ds-text-primary: #111827;
    --ds-text-secondary: #4b5563;
    --ds-text-tertiary: #6b7280;
    --ds-text-muted: #9ca3af;
    --ds-text-inverse: #ffffff;
    --ds-text-disabled: #d1d5db;
    
    /* ============================================
       COULEURS DE BORDURE
       ============================================
    */
    --ds-border-color: #ececf1; /* aligné le 24/08/2026 sur --ck-line (cockpit.css), rendu réel en prod */
    --ds-border-color-light: #f3f4f6;
    --ds-border-color-dark: #d1d5db;
    --ds-border-color-focus: var(--ds-color-primary);
    
    /* ============================================
       ESPACEMENTS
       ============================================
    */
    --ds-spacing-xs: 0.25rem;    /* 4px */
    --ds-spacing-sm: 0.5rem;     /* 8px */
    --ds-spacing-md: 1rem;       /* 16px */
    --ds-spacing-lg: 1.5rem;     /* 24px */
    --ds-spacing-xl: 2rem;       /* 32px */
    --ds-spacing-2xl: 3rem;      /* 48px */
    --ds-spacing-3xl: 4rem;      /* 64px */
    
    /* ============================================
       TYPOGRAPHIE
       ============================================
    */
    --ds-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ds-font-family-mono: 'Courier New', Courier, monospace;
    
    /* Tailles de police */
    --ds-font-size-xs: 0.75rem;      /* 12px */
    --ds-font-size-sm: 0.875rem;     /* 14px */
    --ds-font-size-base: 1rem;       /* 16px */
    --ds-font-size-lg: 1.125rem;     /* 18px */
    --ds-font-size-xl: 1.25rem;      /* 20px */
    --ds-font-size-2xl: 1.5rem;      /* 24px */
    --ds-font-size-3xl: 1.875rem;    /* 30px */
    --ds-font-size-4xl: 2.25rem;     /* 36px */
    
    /* Poids de police */
    --ds-font-weight-light: 300;
    --ds-font-weight-normal: 400;
    --ds-font-weight-medium: 500;
    --ds-font-weight-semibold: 600;
    --ds-font-weight-bold: 700;
    
    /* Hauteurs de ligne */
    --ds-line-height-tight: 1.25;
    --ds-line-height-normal: 1.5;
    --ds-line-height-relaxed: 1.75;
    
    /* ============================================
       RAYONS DE BORDURE
       ============================================
    */
    --ds-radius-none: 0;
    --ds-radius-sm: 0.25rem;     /* 4px */
    --ds-radius-md: 0.5rem;      /* 8px */
    --ds-radius-lg: 0.75rem;     /* 12px */
    --ds-radius-xl: 1rem;        /* 16px */
    --ds-radius-2xl: 1.5rem;     /* 24px */
    --ds-radius-full: 9999px;    /* Rond complet */

    /* Rayons canoniques décidés le 24/08/2026 (audit design system) :
       ne suivent pas l'échelle générique ci-dessus, valeurs alignées sur le rendu réel (cockpit.css) */
    --ds-radius-btn: 9px;        /* Bouton (remplace --ds-radius-md pour .ds-btn) */
    --ds-radius-kpi: 14px;       /* Carte KPI (remplace --ds-radius-lg pour .ds-kpi-card) */

    /* ============================================
       OMBRES
       ============================================
    */
    --ds-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --ds-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --ds-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --ds-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* Surfaces flottantes (référence : MultiSelectDropdown, composant conforme) */
    --ds-shadow-dropdown: 0 10px 30px rgba(0, 0, 0, 0.12);
    --ds-shadow-tooltip: 0 4px 6px rgba(0, 0, 0, 0.1);
    --ds-shadow-drawer: -10px 0 40px rgba(0, 0, 0, 0.15);

    /* Ombres colorées pour les boutons */
    --ds-shadow-primary: 0 8px 25px rgba(99, 102, 241, 0.3);
    --ds-shadow-success: 0 8px 25px rgba(16, 185, 129, 0.3);
    --ds-shadow-warning: 0 8px 25px rgba(245, 158, 11, 0.3);
    --ds-shadow-danger: 0 8px 25px rgba(239, 68, 68, 0.3);
    --ds-shadow-info: 0 8px 25px rgba(6, 182, 212, 0.3);
    
    /* ============================================
       TRANSITIONS
       ============================================
    */
    --ds-transition-fast: 0.15s ease;
    --ds-transition-base: 0.2s ease;
    --ds-transition-slow: 0.3s ease;
    --ds-transition-slower: 0.5s ease;
    
    /* ============================================
       Z-INDEX
       ============================================
    */
    --ds-z-dropdown: 1000;
    --ds-z-sticky: 1020;
    --ds-z-fixed: 1030;
    --ds-z-modal-backdrop: 1040;
    --ds-z-modal: 1050;
    --ds-z-popover: 1060;
    --ds-z-tooltip: 1070;
    --ds-z-toast: 1080;
    
    /* ============================================
       APP SHELL / LAYOUT (décidé le 24/08/2026)
       ============================================
       Les 3 largeurs de sidebar sont assumées comme distinctes, pas unifiées :
       le drawer mobile a une contrainte d'espace différente de la sidebar desktop.
    */
    --ds-sidebar-width: 265px;             /* Sidebar ouverte (desktop) */
    --ds-sidebar-width-collapsed: 75px;    /* Sidebar réduite (desktop) */
    --ds-sidebar-width-mobile: 225px;      /* Sidebar en drawer (mobile) */
    --ds-header-height: 70px;              /* Header — retenu volontairement (pas 64px), lisibilité du texte */
    --ds-logo-height: 48px;                /* Logo — unifié le 24/08/2026 (était 60px app / 48-50px pages auth) */

    /* ============================================
       BREAKPOINTS (pour référence, utilisés en JS)
       ============================================
    */
    --ds-breakpoint-sm: 576px;
    --ds-breakpoint-md: 768px;
    --ds-breakpoint-lg: 992px;
    --ds-breakpoint-lg: 992px;
    --ds-breakpoint-xl: 1200px;
    --ds-breakpoint-2xl: 1400px;
    
    /* ============================================
       VARIABLES SPÉCIFIQUES VURTO (compatibilité)
       ============================================
    */
    --vurto-primary: var(--ds-color-primary);
    --vurto-success: var(--ds-color-success);
    --vurto-warning: var(--ds-color-warning);
    --vurto-danger: var(--ds-color-danger);
    --vurto-info: var(--ds-color-secondary);
    --vurto-gray-100: var(--ds-color-gray-100);
    --vurto-gray-200: var(--ds-color-gray-200);
    --vurto-gray-300: var(--ds-color-gray-300);
    --vurto-gray-500: var(--ds-color-gray-500);
    --vurto-gray-700: var(--ds-color-gray-700);
    --vurto-gray-900: var(--ds-color-gray-900);

    /* ============================================
       OVERRIDE BOOTSTRAP/METRONIC — décidé le 24/08/2026
       ============================================
       --bs-primary (#1B84FF, bleu Metronic) et --bs-info (#7239EA, violet Metronic)
       n'étaient jamais redéfinis : tout composant Bootstrap brut (.btn-light-primary,
       .badge-light-*, .text-primary/-info, .bg-primary/-info, la pagination, les
       toggles, les liens...) restait dans l'ancienne palette malgré la décision
       "couleur primaire = #6366f1 / info = #06b6d4". Ce bloc aligne les variables
       dérivées réellement consommées par le bundle vendor (assets/css/style.bundle.css)
       sans le modifier lui-même. Spécificité identique à [data-bs-theme=light] du
       bundle (0,0,1,0) : gagne car ce fichier charge après lui — voir template.tpl.
       Le thème sombre ([data-bs-theme=dark]) n'est pas touché ici (cf. décision
       "thème sombre : intention conservée, pas activée" plus haut). */
    --bs-primary: var(--ds-color-primary);
    --bs-primary-rgb: 99, 102, 241;
    --bs-primary-active: var(--ds-color-primary-dark);
    --bs-primary-light: var(--ds-color-primary-50);
    --bs-primary-inverse: #ffffff;
    --bs-primary-clarity: rgba(99, 102, 241, 0.2);
    --bs-primary-text-emphasis: var(--ds-color-primary-900);
    --bs-primary-bg-subtle: var(--ds-color-primary-100);
    --bs-primary-border-subtle: var(--ds-color-primary-300);
    --bs-text-primary: var(--ds-color-primary);
    --bs-link-color: var(--ds-color-primary);
    --bs-link-color-rgb: 99, 102, 241;
    --bs-link-hover-color: var(--ds-color-primary-dark);
    --bs-link-hover-color-rgb: 79, 70, 229;
    --bs-focus-ring-color: rgba(99, 102, 241, 0.25);
    --bs-component-active-bg: var(--ds-color-primary);
    --bs-component-hover-color: var(--ds-color-primary);
    --bs-menu-link-color-hover: var(--ds-color-primary);
    --bs-menu-link-color-show: var(--ds-color-primary);
    --bs-menu-link-color-here: var(--ds-color-primary);
    --bs-menu-link-color-active: var(--ds-color-primary);
    --bs-ribbon-label-bg: var(--ds-color-primary);
    --bs-ribbon-label-border-color: var(--ds-color-primary-700);

    --bs-info: var(--ds-color-info);
    --bs-info-rgb: 6, 182, 212;
    --bs-info-active: var(--ds-color-info-dark);
    --bs-info-light: var(--ds-color-info-50);
    --bs-info-inverse: #ffffff;
    --bs-info-clarity: rgba(6, 182, 212, 0.2);
    --bs-text-info: var(--ds-color-info);
    --bs-info-text-emphasis: var(--ds-color-info-900);
    --bs-info-bg-subtle: var(--ds-color-info-100);
    --bs-info-border-subtle: var(--ds-color-info-300);
}

/* Modale — décidé le 25/08/2026 : rayon 16px, overlay 50%.
   Le "vrai" modal en prod est presque partout le Bootstrap natif (pas .ds-modal,
   jamais câblé), qui reste sur les défauts vendor 0.475rem/0.4 sans ce fix.
   Ciblage direct de .modal/.modal-backdrop (pas :root) car style.bundle.css
   redéclare ces custom properties SUR CES ÉLÉMENTS-MÊMES — un override sur
   :root seul serait sans effet (l'élément garde sa propre valeur locale). */
.modal {
    --bs-modal-border-radius: 1rem;
    --bs-modal-inner-border-radius: 1rem;
}
.modal-backdrop {
    --bs-backdrop-opacity: 0.5;
}

/* ============================================
   THÈME SOMBRE (décidé le 24/08/2026 : intention conservée, pas activée)
   ============================================
   Ce bloc cible [data-theme="dark"], un attribut que l'application ne pose
   jamais aujourd'hui (elle pilote data-bs-theme, figé sur "light", sans
   sélecteur de bascule). On garde les tokens tels quels comme point de départ
   pour un futur mode sombre, mais on n'ajoute PAS de switch UI tant que ce
   n'est pas explicitement demandé comme fonctionnalité.
*/
[data-theme="dark"] {
    --ds-bg-primary: #1f2937;
    --ds-bg-secondary: #111827;
    --ds-bg-tertiary: #0f172a;
    --ds-text-primary: #f9fafb;
    --ds-text-secondary: #e5e7eb;
    --ds-text-tertiary: #d1d5db;
    --ds-border-color: #374151;
    --ds-border-color-light: #4b5563;
    --ds-border-color-dark: #6b7280;
}