/**
 * Variables CSS pour la charte graphique front-office
 * Module CRM pour PrestaShop
 *
 * @author    Hendrik Masson <postmaster@ndk-design.fr>
 * @copyright Copyright 2024 NDK Design
 * @license   Tous droits réservés
 */

:root {
    /* Couleurs principales */
    --ndk-primary: #007bff;
    --ndk-primary-dark: #0056b3;
    --ndk-primary-darker: #004085;
    --ndk-primary-light: #63b3ed;
    --ndk-primary-lighter: #e3f2fd;
    
    /* Couleurs secondaires */
    --ndk-secondary: #6c757d;
    --ndk-secondary-dark: #495057;
    --ndk-secondary-light: #adb5bd;
    
    /* Couleurs de succès */
    --ndk-success: #28a745;
    --ndk-success-dark: #1e7e34;
    --ndk-success-light: #7dd3fc;
    --ndk-success-lighter: #d4edda;
    --ndk-success-border: #b1dfbb;
    
    /* Couleurs d'erreur */
    --ndk-error: #dc3545;
    --ndk-error-dark: #c82333;
    --ndk-error-light: #f5c6cb;
    --ndk-error-lighter: #f8d7da;
    --ndk-error-border: #f1b0b7;
    
    /* Couleurs d'avertissement */
    --ndk-warning: #ffc107;
    --ndk-warning-dark: #e0a800;
    --ndk-warning-light: #ffeaa7;
    --ndk-warning-lighter: #fff3cd;
    --ndk-warning-border: #ffeaa7;
    
    /* Couleurs d'information */
    --ndk-info: #17a2b8;
    --ndk-info-dark: #138496;
    --ndk-info-light: #b3e5fc;
    --ndk-info-lighter: #d1ecf1;
    --ndk-info-border: #bee5eb;
    
    /* Couleurs neutres */
    --ndk-white: #ffffff;
    --ndk-black: #000000;
    --ndk-gray-50: #f8f9fa;
    --ndk-gray-100: #e9ecef;
    --ndk-gray-200: #dee2e6;
    --ndk-gray-300: #ced4da;
    --ndk-gray-400: #adb5bd;
    --ndk-gray-500: #6c757d;
    --ndk-gray-600: #495057;
    --ndk-gray-700: #343a40;
    --ndk-gray-800: #212529;
    --ndk-gray-900: #1a1a1a;
    
    /* Couleurs de texte */
    --ndk-text-primary: #333333;
    --ndk-text-secondary: #666666;
    --ndk-text-muted: #999999;
    --ndk-text-light: #ffffff;
    --ndk-text-dark: #212529;
    
    /* Couleurs de fond */
    --ndk-bg-primary: #ffffff;
    --ndk-bg-secondary: #f8f9fa;
    --ndk-bg-dark: #343a40;
    --ndk-bg-light: #ffffff;
    
    /* Couleurs de bordure */
    --ndk-border-color: #dee2e6;
    --ndk-border-color-light: #e9ecef;
    --ndk-border-color-dark: #adb5bd;
    
    /* Couleurs d'ombre */
    --ndk-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --ndk-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    --ndk-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --ndk-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.3);
    
    /* Couleurs de focus */
    --ndk-focus-ring: rgba(0, 123, 255, 0.25);
    --ndk-focus-ring-success: rgba(40, 167, 69, 0.25);
    --ndk-focus-ring-error: rgba(220, 53, 69, 0.25);
    --ndk-focus-ring-warning: rgba(255, 193, 7, 0.25);
    --ndk-focus-ring-info: rgba(23, 162, 184, 0.25);
    
    /* Couleurs de gradient */
    --ndk-gradient-primary: linear-gradient(135deg, var(--ndk-primary) 0%, var(--ndk-primary-dark) 100%);
    --ndk-gradient-primary-hover: linear-gradient(135deg, var(--ndk-primary-dark) 0%, var(--ndk-primary-darker) 100%);
    --ndk-gradient-success: linear-gradient(135deg, var(--ndk-success) 0%, var(--ndk-success-dark) 100%);
    --ndk-gradient-error: linear-gradient(135deg, var(--ndk-error) 0%, var(--ndk-error-dark) 100%);
    
    /* Couleurs de transparence */
    --ndk-overlay: rgba(0, 0, 0, 0.5);
    --ndk-backdrop-blur: blur(4px);
    
    /* Espacements */
    --ndk-spacing-xs: 4px;
    --ndk-spacing-sm: 8px;
    --ndk-spacing-md: 16px;
    --ndk-spacing-lg: 24px;
    --ndk-spacing-xl: 32px;
    --ndk-spacing-xxl: 48px;
    
    /* Rayons de bordure */
    --ndk-border-radius-sm: 4px;
    --ndk-border-radius: 6px;
    --ndk-border-radius-lg: 8px;
    --ndk-border-radius-xl: 12px;
    --ndk-border-radius-full: 50%;
    
    /* Transitions */
    --ndk-transition-fast: 0.15s ease;
    --ndk-transition: 0.3s ease;
    --ndk-transition-slow: 0.5s ease;
    
    /* Z-index */
    --ndk-z-dropdown: 1000;
    --ndk-z-sticky: 1020;
    --ndk-z-fixed: 1030;
    --ndk-z-modal-backdrop: 1040;
    --ndk-z-modal: 1050;
    --ndk-z-popover: 1060;
    --ndk-z-tooltip: 1070;
    --ndk-z-toast: 1080;
}

/* Thème sombre */
@media (prefers-color-scheme: dark-test) {
    :root {
        /* Couleurs principales (adaptées pour le thème sombre) */
        --ndk-primary: #63b3ed;
        --ndk-primary-dark: #3182ce;
        --ndk-primary-darker: #2c5282;
        --ndk-primary-light: #90cdf4;
        --ndk-primary-lighter: #2d3748;
        
        /* Couleurs neutres (inversées) */
        --ndk-white: #1a202c;
        --ndk-black: #ffffff;
        --ndk-gray-50: #2d3748;
        --ndk-gray-100: #4a5568;
        --ndk-gray-200: #718096;
        --ndk-gray-300: #a0aec0;
        --ndk-gray-400: #cbd5e0;
        --ndk-gray-500: #e2e8f0;
        --ndk-gray-600: #f7fafc;
        --ndk-gray-700: #ffffff;
        --ndk-gray-800: #f7fafc;
        --ndk-gray-900: #edf2f7;
        
        /* Couleurs de texte (adaptées) */
        --ndk-text-primary: #e2e8f0;
        --ndk-text-secondary: #a0aec0;
        --ndk-text-muted: #718096;
        --ndk-text-light: #1a202c;
        --ndk-text-dark: #f7fafc;
        
        /* Couleurs de fond (adaptées) */
        --ndk-bg-primary: #2d3748;
        --ndk-bg-secondary: #4a5568;
        --ndk-bg-dark: #1a202c;
        --ndk-bg-light: #4a5568;
        
        /* Couleurs de bordure (adaptées) */
        --ndk-border-color: #4a5568;
        --ndk-border-color-light: #718096;
        --ndk-border-color-dark: #a0aec0;
        
        /* Couleurs d'ombre (adaptées) */
        --ndk-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
        --ndk-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
        --ndk-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
        --ndk-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6);
        
        /* Couleurs de focus (adaptées) */
        --ndk-focus-ring: rgba(99, 179, 237, 0.25);
        --ndk-focus-ring-success: rgba(72, 187, 120, 0.25);
        --ndk-focus-ring-error: rgba(245, 101, 101, 0.25);
        --ndk-focus-ring-warning: rgba(237, 137, 54, 0.25);
        --ndk-focus-ring-info: rgba(66, 153, 225, 0.25);
        
        /* Couleurs de gradient (adaptées) */
        --ndk-gradient-primary: linear-gradient(135deg, var(--ndk-primary) 0%, var(--ndk-primary-dark) 100%);
        --ndk-gradient-primary-hover: linear-gradient(135deg, var(--ndk-primary-dark) 0%, var(--ndk-primary-darker) 100%);
        
        /* Couleurs de transparence (adaptées) */
        --ndk-overlay: rgba(0, 0, 0, 0.7);
    }
}

/* Variables pour les états de composants */
:root {
    /* États de boutons */
    --ndk-btn-primary-bg: var(--ndk-gradient-primary);
    --ndk-btn-primary-hover-bg: var(--ndk-gradient-primary-hover);
    --ndk-btn-primary-color: var(--ndk-white);
    --ndk-btn-primary-border: transparent;
    
    --ndk-btn-secondary-bg: var(--ndk-secondary);
    --ndk-btn-secondary-hover-bg: var(--ndk-secondary-dark);
    --ndk-btn-secondary-color: var(--ndk-white);
    --ndk-btn-secondary-border: transparent;
    
    --ndk-btn-success-bg: var(--ndk-gradient-success);
    --ndk-btn-success-hover-bg: linear-gradient(135deg, var(--ndk-success-dark) 0%, var(--ndk-success) 100%);
    --ndk-btn-success-color: var(--ndk-white);
    --ndk-btn-success-border: transparent;
    
    --ndk-btn-error-bg: var(--ndk-gradient-error);
    --ndk-btn-error-hover-bg: linear-gradient(135deg, var(--ndk-error-dark) 0%, var(--ndk-error) 100%);
    --ndk-btn-error-color: var(--ndk-white);
    --ndk-btn-error-border: transparent;
    
    /* États de formulaires */
    --ndk-input-bg: var(--ndk-bg-primary);
    --ndk-input-border: var(--ndk-border-color);
    --ndk-input-color: var(--ndk-text-primary);
    --ndk-input-focus-border: var(--ndk-primary);
    --ndk-input-focus-ring: var(--ndk-focus-ring);
    --ndk-input-placeholder: var(--ndk-text-muted);
    
    /* États de modales */
    --ndk-modal-bg: var(--ndk-bg-primary);
    --ndk-modal-border: var(--ndk-border-color);
    --ndk-modal-shadow: var(--ndk-shadow-xl);
    --ndk-modal-header-bg: var(--ndk-bg-secondary);
    --ndk-modal-overlay: var(--ndk-overlay);
    
    /* États de messages */
    --ndk-message-success-bg: var(--ndk-success-lighter);
    --ndk-message-success-border: var(--ndk-success-border);
    --ndk-message-success-color: var(--ndk-success-dark);
    
    --ndk-message-error-bg: var(--ndk-error-lighter);
    --ndk-message-error-border: var(--ndk-error-border);
    --ndk-message-error-color: var(--ndk-error-dark);
    
    --ndk-message-warning-bg: var(--ndk-warning-lighter);
    --ndk-message-warning-border: var(--ndk-warning-border);
    --ndk-message-warning-color: var(--ndk-warning-dark);
    
    --ndk-message-info-bg: var(--ndk-info-lighter);
    --ndk-message-info-border: var(--ndk-info-border);
    --ndk-message-info-color: var(--ndk-info-dark);
}