/**
 * Variables CSS — Variables CSS centralisées (couleurs, espacements, typographie)
 *
 * Définit toutes les custom properties CSS utilisées dans le plugin.
 * Utilisation : var(--cc-nom-variable).
 *
 * @file        cc-variables.css
 * @package     CaisseConnect
 * @subpackage  CSS\Core
 * @since       0.9
 * @version     1.2.5
 * @author      Microlibre <contact@microlibre.net>
 * @copyright   2026 Microlibre
 * @license     GPL-2.0+ https://www.gnu.org/licenses/gpl-2.0.html
 * @link        https://microlibre.net/caisse-connect
 */

:root {
    /* ========================================
       COULEURS PRIMAIRES
       ======================================== */
    --cc-primary: #667eea;
    --cc-primary-dark: #764ba2;
    --cc-primary-focus: rgba(102, 126, 234, 0.1);
    --cc-primary-shadow: rgba(102, 126, 234, 0.3);
    --cc-secondary: #0073aa;
    --cc-secondary-dark: #005a87;

    /* ========================================
       COULEURS DASHBOARD MODERNE
       ======================================== */
    /* Menu latéral */
    --cc-menu-bg: #f9fafb;
    --cc-menu-text: #374151;
    --cc-menu-text-muted: #6b7280;
    --cc-menu-active-bg: #007bff;
    --cc-menu-active-text: #ffffff;
    --cc-menu-hover-bg: #e7f3ff;
    --cc-menu-border: #e5e7eb;

    /* Header */
    --cc-header-border: #e5e7eb;

    /* Boutons */
    --cc-btn-outline-border: #d1d5db;
    --cc-btn-outline-text: #374151;
    --cc-btn-outline-hover-bg: #f3f4f6;

    /* ========================================
       COULEURS D'ETAT
       ======================================== */
    /* Success (vert) */
    --cc-success: #28a745;
    --cc-success-bg: #d4edda;
    --cc-success-text: #155724;
    --cc-success-border: #c3e6cb;

    /* Error (rouge) */
    --cc-error: #dc3545;
    --cc-error-bg: #f8d7da;
    --cc-error-text: #721c24;
    --cc-error-border: #f5c6cb;
    --cc-error-dark: #c82333;

    /* Warning (orange/jaune) */
    --cc-warning: #ffc107;
    --cc-warning-bg: #fff3cd;
    --cc-warning-text: #856404;
    --cc-warning-alt: #f2b72a;
    --cc-warning-dark: #ff8c00;

    /* Info (bleu) */
    --cc-info: #0073aa;
    --cc-info-bg: #e7f3ff;
    --cc-info-text: #383d41;

    /* Info-alt (bleu Material Design, pour notes info) */
    --cc-info-alt: #2196f3;
    --cc-info-alt-bg: #e7f3fe;
    --cc-info-alt-border: #90caf9;

    /* Important (bleu fonce) */
    --cc-important: #007bff;
    --cc-important-dark: #0056b3;
    --cc-important-darker: #004494;
    --cc-important-bg: #cce5ff;
    --cc-important-text: #004085;

    /* Déplacement (violet) */
    --cc-purple: #826eb4;
    --cc-purple-bg: #f3e5f5;
    --cc-purple-dark: #7b1fa2;
    --cc-purple-border: #ce93d8;

    /* Utilitaire */
    --cc-orange: #fd7e14;
    --cc-note-bg: #ffe5b4;

    /* ========================================
       COULEURS NEUTRES
       ======================================== */
    --cc-white: #fff;
    --cc-white-glass: rgba(255, 255, 255, 0.7);
    --cc-white-overlay: rgba(255, 255, 255, 0.9);
    --cc-black: #000;
    --cc-text: #333;
    --cc-text-light: #555;
    --cc-gray-100: #f9f9f9;
    --cc-gray-200: #f5f5f5;
    --cc-gray-300: #f0f0f0;
    --cc-gray-350: #eee;
    --cc-gray-400: #ddd;
    --cc-gray-500: #ccc;
    --cc-gray-600: #999;
    --cc-gray-700: #666;
    --cc-gray-800: #383d41;
    --cc-gray-muted: #adb5bd;
    --cc-secondary-btn: #6c757d;
    --cc-secondary-btn-dark: #5a6268;
    --cc-scan-highlight: #00ff00;

    /* ========================================
       COULEURS WORDPRESS ADMIN
       ======================================== */
    --cc-wp-link: #2271b1;
    --cc-wp-link-dark: #135e96;
    --cc-wp-text: #1d2327;
    --cc-wp-text-secondary: #646970;
    --cc-wp-border: #8c8f94;
    --cc-wp-border-light: #c3c4c7;
    --cc-wp-highlight-bg: #f0f6fc;

    /* ========================================
       ESPACEMENTS
       ======================================== */
    --cc-spacing-xs: 5px;
    --cc-spacing-sm: 10px;
    --cc-spacing-md: 15px;
    --cc-spacing-lg: 20px;
    --cc-spacing-xl: 30px;

    /* ========================================
       BORDURES
       ======================================== */
    --cc-border-radius: 4px;
    --cc-border-radius-sm: 3px;
    --cc-border-color: #ddd;

    /* ========================================
       Z-INDEX
       ======================================== */
    --cc-z-dropdown: 1000;
    --cc-z-infobulle: 9991;
    --cc-z-modal: 100000;
    --cc-z-modal-info: 1000001;
    --cc-z-overlay-chargement: 1000002;   /* au-dessus de tout : overlay de rechargement page */
    --cc-z-wizard: 999999;

    /* ========================================
       OMBRES ET OVERLAYS
       ======================================== */
    --cc-shadow-modal: 0 5px 30px rgba(0, 0, 0, 0.3);
    --cc-overlay-bg: rgba(0, 0, 0, 0.6);
    --cc-overlay-bg-dark: rgba(0, 0, 0, 0.8);

    /* ========================================
       TRANSITIONS
       ======================================== */
    --cc-transition: 0.2s ease;

    /* ========================================
       TYPOGRAPHIE
       ======================================== */
    --cc-font-mono: monospace;
    --cc-font-size-sm: 12px;
    --cc-font-size-md: 14px;
    --cc-font-size-lg: 18px;
}