/**
 * Variables CSS globales
 * Nouvelle palette de couleurs et système d'espacement
 */

:root {
    /* Couleurs principales */
    --primary-color: #0E9CFF;
    --primary-color-rgb: 14, 156, 255;
    --primary-light: #E3F2FD;
    --secondary-color: #4CAF50;
    --secondary-color-rgb: 76, 175, 80;
    
    /* Couleurs d'interface */
    --bg-color: #F5F5F5;
    --card-bg: #FFFFFF;
    --border-color: #E0E0E0;
    --hover-color: #E3F2FD;
    --text-on-primary: #FFFFFF;
    
    /* Couleurs pour les textes */
    --text-color: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    
    /* Couleurs fonctionnelles */
    --success-color: #4CAF50;
    --warning-color: #FF9800;
    --error-color: #F44336;
    --info-color: #2196F3;
    --danger-color: #F44336;

    /* Couleurs pour les textes */
    --text-color: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;

    /* Système d'espacement - Scale uniforme */
    --spacing-xs: 4px;    /* 0.25rem */
    --spacing-sm: 8px;    /* 0.5rem */
    --spacing-md: 16px;   /* 1rem */
    --spacing-lg: 24px;   /* 1.5rem */
    --spacing-xl: 32px;   /* 2rem */
    --spacing-xxl: 48px;  /* 3rem */

    /* Bordures et arrondi - Activer les bordures arrondies pour un style moderne */
    --text-muted: #999999;    --border-radius-xs: 2px;
    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-circle: 50%;

    /* Ombres */
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    --inset-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.09);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);

    /* Animation et transitions */
    --transition-fast: 0.15s ease;
    --transition-duration: 0.3s;
    --transition-slow: 0.5s;
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-default: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Typographie - Famille de polices cohérente et hiérarchie claire */
    --font-family: 'Poppins', 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.85rem;   /* 14px */
    --font-size: 1rem;         /* 16px - base */
    --font-size-md: 1.2rem;    /* 19px */
    --font-size-lg: 1.5rem;    /* 24px */
    --font-size-xl: 1.8rem;    /* 29px */
    --font-size-xxl: 2.4rem;   /* 38px */

    /* Line height et letter spacing */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.8;
    --letter-spacing-tight: -0.015em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.015em;

    /* Breakpoints pour le responsive design */
    --breakpoint-mobile: 640px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1280px;

    /* Thème sombre optimisé */
    --bg-color-dark: #121212;
    --text-color-dark: #e0e0e0;
    --button-bg-dark: #2c2c2c;
    --button-bg-hover-dark: #404040;
    --button-text-dark: #ffffff;

    /* Variables pour les composants communs */
    --button-border-radius: var(--border-radius);
    --button-gap: var(--spacing-sm);

    /* Calculatrice */
    --calc-padding: var(--spacing-md);
    --calc-display-bg: #F8F9FA;
    --calc-display-text: #333333;
    --calc-display-bg-dark: #333333;
    --calc-button-bg: #FFFFFF;
    --calc-button-bg-hover: #F5F5F5;
    --calc-button-text: #333333;
    --calc-button-primary: #4a9eff;
    --calc-button-secondary: #64b5f6;
    --calc-button-operator: #E3F2FD;
    --calc-button-equals: #1a7fff;
    --calc-button-clear: #ff4d4d;

    /* QR Code */
    --qrcode-tab-bg: #FFFFFF;
    --qrcode-tab-active: var(--primary-color);
    --qrcode-tab-text: #333333;
    --qrcode-tab-text-active: #FFFFFF;
    --qrcode-output-bg: #FFFFFF;
    --qrcode-output-border: #E0E0E0;
    --qrcode-scanner-bg: #F5F5F5;
    --qrcode-marker-color: var(--primary-color);

    /* Chronomètre/Timer */
    --timer-display-bg: #F8F9FA;
    --timer-display-text: #333333;
    --timer-button-start: #4CAF50;
    --timer-button-stop: #F44336;
    --timer-button-lap: var(--primary-color);
    --timer-progress-bg: #E0E0E0;
    --timer-progress-fill: var(--primary-color);

    /* Couleurs pour les monnaies */
    --currency-primary: #4f6df5;
    --currency-primary-hover: #3a5bf0;
    --currency-primary-rgb: 79, 109, 245;
    --currency-secondary: #f5844f;
    --currency-secondary-rgb: 245, 132, 79;
    --currency-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --currency-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --currency-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.1);
    --currency-shadow-inner: inset 0 2px 6px rgba(0, 0, 0, 0.05);
    --currency-highlight: rgba(255, 255, 255, 0.8);
    --currency-highlight-dim: rgba(255, 255, 255, 0.3);
    --currency-focus-outline: 0 0 0 3px rgba(79, 109, 245, 0.25);
    --currency-transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    --currency-spacing-sm: 0.5rem;
    --currency-spacing-md: 1rem;
    --currency-spacing-lg: 1.5rem;
    --currency-spacing-xl: 2rem;
    --currency-border-radius-sm: 8px;
    --currency-border-radius-md: 16px;
    --currency-border-radius-lg: 24px;

    /* Couleurs pour les tâches */
    --todo-primary: #4c6ef5;
    --todo-primary-light: #748ffc;
    --todo-primary-dark: #3b5bdb;
    --todo-secondary: #ff922b;
    --todo-danger: #fa5252;
    --todo-success: #40c057;
    --todo-warning: #fab005;
    --todo-info: #15aabf;
    --todo-border-radius: 10px;
    --todo-transition: all 0.3s ease;

    /* Notes */
    --note-bg: #FFFFFF;
    --note-border: #E0E0E0;
    --note-toolbar-bg: #F5F5F5;
    --note-toolbar-button: #666666;
    --note-toolbar-button-hover: #333333;

    /* Métronome */
    --metronome-pendulum-color: var(--primary-color);
    --metronome-bg: #FFFFFF;
    --metronome-marker-color: #F44336;
    --metronome-tempo-bg: #F5F5F5;

    /* Traducteur */
    --translator-lang-bg: #F5F5F5;
    --translator-arrow-color: var(--primary-color);
    --translator-input-bg: #FFFFFF;
    --translator-swap-button: var(--primary-color);

    /* Convertisseur de devise/unités */
    --converter-arrow-color: var(--primary-color);
    --converter-result-bg: #F8F9FA;
    --converter-select-bg: #FFFFFF;

    /* Sélecteur de couleur */
    --color-picker-slider-bg: linear-gradient(to right, #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF, #FF0000);
    --color-picker-hue-thumb: #FFFFFF;
    --color-picker-saturation-bg: #FF0000;
    --color-picker-alpha-bg: transparent;
    --color-picker-alpha-pattern: #CCCCCC;

    /* Password Generator */
    --password-bg: #F8F9FA;
    --password-text: #333333;
    --password-strength-weak: #F44336;
    --password-strength-medium: #FF9800;
    --password-strength-strong: #4CAF50;

    /* Containers et formulaires communs */
    --tool-container-bg: #FFFFFF;
    --tool-header-bg: #F5F5F5;
    --tool-header-text: #333333;
    --form-input-bg: #FFFFFF;
    --form-input-border: #E0E0E0;
    --form-input-focus-border: var(--primary-color);
    --form-input-text: #333333;
    --form-label-text: #666666;
    --form-select-bg: #FFFFFF;
    --form-range-bg: #E0E0E0;
    --form-range-thumb: var(--primary-color);
    --form-file-bg: #F5F5F5;
    --form-checkbox-color: var(--primary-color);
    --help-panel-bg: #FFFFFF;
    --help-panel-header-bg: #F5F5F5;

    /* Harmonisation - Variables ajoutées */
    --primary-gradient-blue: #1e40af; /* Pour les dégradés header, etc. */
    --primary-gradient-purple: #3730a3;
    --primary-blue: #0063b1;
    --primary-dark-blue: #004c8c;
    --success-color-dark: #388e3c;
    --warning-color-dark: #FFA000;
    --info-color-dark: #0288D1;
    --primary-color-hover: #1d5fa8;
    --danger-color-hover: #c0392b;
    --menu-min-width: 200px;
    --menu-max-width: 250px;
    --header-height: 70px;
    --container-max-width: 1800px;
    --menu-min-width-md: 180px;
    --menu-max-width-md: 250px;
    --menu-min-width-sm: 160px;
    --menu-max-width-sm: 230px;
    --menu-max-width-mobile: 320px;
    --scrollbar-width: 6px;
    --icon-width: 1.5rem;
    --toggle-width: 24px;
    --toggle-height: 18px;
    --hamburger-bar-height: 2px;
    --notification-close-hover-bg: rgba(0, 0, 0, 0.1);
    --notification-close-hover-bg-dark: rgba(255, 255, 255, 0.1);
    --header-title-gradient-1: #ffffff;
    --header-title-gradient-2: #f0f0f0;

    /* Ajouts pour harmonisation des outils */
    --input-bg: #FFFFFF;
    --button-bg: #F5F5F5;
    --button-hover-bg: #E3F2FD;
    --primary-hover: #1d5fa8;
    --danger-hover: #c0392b;
    --text-color-secondary: #666666;
    --todo-item-bg-hover: #F0F0F0;
}

/* Variables pour le thème sombre */
[data-theme="dark"] {
    /* Couleurs principales en mode sombre */
    --primary-color: #0E9CFF;
    --primary-color-rgb: 14, 156, 255;
    --primary-light: #1a3550;
    --secondary-color: #66BB69;
    --secondary-color-rgb: 102, 187, 105;

    /* Couleurs d'interface en mode sombre */
    --bg-color: #121212;
    --card-bg: #1E1E1E;
    --border-color: #333333;
    --hover-color: #2A3747;
    --text-on-primary: #FFFFFF;

    /* Couleurs pour les textes en mode sombre */
    --text-color: #E0E0E0;
    --text-secondary: #AAAAAA;
    --text-muted: #777777;
    --text-color-secondary: #AAAAAA;

    /* Couleurs fonctionnelles en mode sombre */
    --success-color: #66BB69;
    --success-color-dark: #4a8c4c;
    --warning-color: #FFB74D;
    --warning-color-dark: #cc9339;
    --error-color: #FF6B6B;
    --info-color: #4FC3F7;
    --info-color-dark: #3a94b8;
    --danger-color: #FF6B6B;
    --danger-color-hover: #b74b4b;

    /* Ombres en mode sombre */
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    --inset-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);

    /* Calculatrice en mode sombre */
    --calc-display-bg: #333333;
    --calc-display-text: #E0E0E0;
    --calc-button-bg: #2C2C2C;
    --calc-button-bg-hover: #404040;
    --calc-button-text: #E0E0E0;
    --calc-button-operator: #505050;
    --calc-button-primary: #3a8ad2;
    --calc-button-secondary: #4d96cc;
    --calc-button-equals: #1d6fc7;
    --calc-button-clear: #c74242;

    /* Containers et formulaires communs en mode sombre */
    --tool-container-bg: #1E1E1E;
    --tool-header-bg: #262626;
    --tool-header-text: #E0E0E0;
    --form-input-bg: #2C2C2C;
    --form-input-border: #333333;
    --form-input-focus-border: var(--primary-color);
    --form-input-text: #E0E0E0;
    --form-label-text: #AAAAAA;
    --form-select-bg: #2C2C2C;
    --form-range-bg: #333333;
    --form-range-thumb: var(--primary-color);
    --form-file-bg: #2C2C2C;
    --form-checkbox-color: var(--primary-color);
    --help-panel-bg: #262626;
    --help-panel-header-bg: #333333;

    /* QR Code en mode sombre */
    --qrcode-tab-bg: #262626;
    --qrcode-tab-text: #E0E0E0;
    --qrcode-tab-active: var(--primary-color);
    --qrcode-tab-text-active: #FFFFFF;
    --qrcode-output-bg: #333333;
    --qrcode-output-border: #444444;
    --qrcode-scanner-bg: #262626;
    --qrcode-marker-color: var(--primary-color);

    /* Chronomètre/Timer en mode sombre */
    --timer-display-bg: #333333;
    --timer-display-text: #E0E0E0;
    --timer-progress-bg: #444444;
    --timer-progress-fill: var(--primary-color);
    --timer-button-start: #4CAF50;
    --timer-button-stop: #FF6B6B;
    --timer-button-lap: var(--primary-color);

    /* Todo en mode sombre */
    --todo-item-bg: #262626;
    --todo-item-border: #333333;
    --todo-item-completed-bg: #333333;
    --todo-checkbox-color: var(--primary-color);
    --todo-priority-high: #FF6B6B;
    --todo-priority-medium: #FFB74D;
    --todo-priority-low: #66BB69;
    --todo-item-bg-hover: #333333;

    /* Notes en mode sombre */
    --note-bg: #262626;
    --note-border: #333333;
    --note-toolbar-bg: #333333;
    --note-toolbar-button: #AAAAAA;
    --note-toolbar-button-hover: #E0E0E0;

    /* Métronome en mode sombre */
    --metronome-pendulum-color: var(--primary-color);
    --metronome-bg: #262626;
    --metronome-marker-color: #FF6B6B;
    --metronome-tempo-bg: #333333;

    /* Traducteur en mode sombre */
    --translator-lang-bg: #262626;
    --translator-arrow-color: var(--primary-color);
    --translator-input-bg: #333333;
    --translator-swap-button: var(--primary-color);

    /* Convertisseur de devise/unités en mode sombre */
    --converter-arrow-color: var(--primary-color);
    --converter-result-bg: #333333;
    --converter-select-bg: #262626;

    /* Sélecteur de couleur en mode sombre */
    --color-picker-hue-thumb: #FFFFFF;
    --color-picker-saturation-bg: #FF0000;
    --color-picker-alpha-bg: transparent;
    --color-picker-alpha-pattern: #444444;

    /* Password Generator en mode sombre */
    --password-bg: #333333;
    --password-text: #E0E0E0;
    --password-strength-weak: #FF6B6B;
    --password-strength-medium: #FFB74D;
    --password-strength-strong: #66BB69;

    /* Ajouts pour harmonisation des outils en mode sombre */
    --input-bg: #262626;
    --button-bg: #2C2C2C;
    --button-hover-bg: #404040;
    --button-text: #E0E0E0;
    --primary-hover: #0a6ecf;
    --danger-hover: #a93226;
    --todo-item-bg-hover: #333333;

    /* Variables pour dégradés et titres */
    --primary-gradient-blue: #0a4994;
    --primary-gradient-purple: #292481;
    --primary-blue: #0078d4;
    --primary-dark-blue: #005a9e;
    --header-title-gradient-1: #e0e0e0;
    --header-title-gradient-2: #aaaaaa;

    /* Variables pour notifications */
    --notification-close-hover-bg: rgba(255, 255, 255, 0.1);
}

/* Adaptation mobile */
@media (max-width: 768px) {
    :root {
        --spacing-lg: 20px;
        --spacing-xl: 24px;
        --spacing-xxl: 32px;
    }
}

@media (max-width: 480px) {
    :root {
        --spacing-md: 12px;
        --spacing-lg: 16px;
        --spacing-xl: 20px;
        --font-size-xl: 1.5rem;
        --font-size-xxl: 2rem;
    }
}