/* ========================================
   FACTUREX - CSS Unifié
   Design System ECE Groupe
   ======================================== */

/* ==========================================
   1. VARIABLES CSS ECE GROUPE
   ========================================== */

:root {
    /* Couleurs Purple ECE */
    --ece-purple-dark: #1c133c;
    --ece-purple: #2d2056;
    --ece-purple-light: #3d3070;

    /* Couleurs Gold ECE */
    --ece-gold: #b6a54d;
    --ece-gold-light: #d4c470;
    --ece-gold-lighter: #c9b563;
    /* Or foncé — réservé au TEXTE sur fond clair : l'or de marque
       plafonne à 2,5:1 sur blanc (illisible), celui-ci atteint 6,3:1. */
    --ece-gold-dark: #6b6130;
    /* Teintes hover des aplats (10 % plus foncées) */
    --ece-gold-hover: #a2913e;
    --ece-warning-hover: #cf6d15;

    /* Couleurs Neutres */
    --ece-gray-light: #e6e6ed;
    --ece-gray-100: #f8f9fa;
    --ece-gray-200: #e9ecef;
    --ece-gray-300: #dee2e6;
    --ece-gray-600: #6c757d;
    --ece-gray-800: #343a40;

    /* Couleurs Sémantiques (états : succès/alerte/erreur/info).
       Volontairement distinctes du purple/gold de marque — un badge
       « erreur » doit rester rouge. Le bleu Bootstrap est en revanche
       banni : « primary » = purple ECE (voir .badge.bg-primary). */
    --ece-danger: #dc3545;
    --ece-danger-dark: #c82333;
    --ece-warning: #e67e22;
    --ece-warning-light: #f39c12;
    /* Orange foncé — texte sur fond clair (5,1:1 vs 2,8:1 pour l'orange vif) */
    --ece-warning-dark: #a85b12;
    --ece-success: #198754;
    --ece-success-dark: #146c43;
    --ece-info: var(--ece-purple-light);
    --ece-text-dark: #2d3748;
    --ece-text-muted: #6c757d;

    /* Échelle Typographique (tailles canoniques) */
    --font-size-xs: 0.7rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 2rem;

    /* Espacements */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 15px;
}

/* ==========================================
   2. GRADIENTS ECE GROUPE
   ========================================== */

.gradient-primary {
    background: linear-gradient(135deg, var(--ece-purple-dark) 0%, var(--ece-purple) 100%);
}

.gradient-success {
    background: linear-gradient(135deg, var(--ece-gold) 0%, var(--ece-gold-light) 100%);
}

.gradient-warning {
    background: linear-gradient(135deg, var(--ece-gold) 0%, var(--ece-gold-lighter) 100%);
}

.gradient-info {
    background: linear-gradient(135deg, var(--ece-purple) 0%, var(--ece-purple-light) 100%);
}

.gradient-danger {
    background: linear-gradient(135deg, #8b2252 0%, #a8325e 100%);
}

/* Tuile neutre/inactive (etat zero des KPI) — definie le 23/07 :
   la classe etait UTILISEE (tuiles PA) mais jamais definie -> tuiles
   blanches au texte invisible depuis l'origine. */
.gradient-secondary {
    background: linear-gradient(135deg, var(--ece-gray-600) 0%, var(--ece-gray-800) 100%);
}

.gradient-gold {
    background: linear-gradient(135deg, var(--ece-gold-lighter) 0%, var(--ece-gold-light) 100%);
}