/* ===================================
   VARIABLES.CSS - DJR 20
   Design system centralisé (Single Source of Truth)

   À charger EN PREMIER (avant base.css et les CSS de page) dans chaque
   page HTML.

   Refonte 2026 : palette de marque enrichie, échelle d'espacement,
   ombres affinées, anneau de focus accessible, dégradés de fond immersifs.

   ⚠️ COULEURS VITALES — NE PAS MODIFIER (statuts, alertes retard/retour,
   terminal). Leurs valeurs sont conservées à l'identique pour ne casser
   aucun code couleur métier documenté dans AGENTS.md.
   =================================== */

:root {
    /* ===== COULEURS DE MARQUE ===== */
    --color-primary: #667eea;
    --color-primary-dark: #764ba2;
    --color-primary-light: #8fa2f4; /* nouveau — accents clairs, hovers */
    --color-primary-soft: #eef1fe; /* nouveau — fonds teintés discrets */

    /* ===== DÉGRADÉS ===== */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-primary-vivid: linear-gradient(135deg, #7c8ff5 0%, #667eea 45%, #764ba2 100%);
    --gradient-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --gradient-nav: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    --gradient-danger: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    --gradient-danger-hover: linear-gradient(135deg, #ee5a6f, #c44569);

    /* Fond immersif de la page de login (mesh de blobs radiaux) */
    --gradient-login:
        radial-gradient(1200px 800px at 12% 18%, rgba(124, 143, 245, 0.55), transparent 60%), radial-gradient(1000px 700px at 88% 82%, rgba(118, 75, 162, 0.55), transparent 60%),
        radial-gradient(900px 900px at 78% 12%, rgba(102, 126, 234, 0.35), transparent 55%), linear-gradient(135deg, #2a2d4a 0%, #3a2c56 55%, #1f2138 100%);

    /* ===== COULEURS DE STATUT (VITALES — inchangées) ===== */
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-info: #007bff;
    --color-info-dark: #0056b3;
    --color-gray: #6c757d;

    /* ===== COULEURS D'ALERTE (VITALES — page Alerte, inchangées) ===== */
    --color-alert-overdue: #ff4757;
    --color-alert-overdue-dark: #ff3838;
    --color-alert-warning: #ffa502;
    --color-alert-warning-dark: #ff8c00;

    /* ===== TEXTE ===== */
    --color-text: #2c3e50;
    --color-text-muted: #34495e;
    --color-text-soft: #6b7a8d; /* nouveau — libellés secondaires, hints */

    /* ===== FONDS & BORDURES ===== */
    --color-surface: #ffffff; /* nouveau — cartes, panneaux */
    --color-bg-light: #f8f9fa;
    --color-bg-muted: #e9ecef;
    --color-border: #dee2e6;
    --color-border-light: #e1e8ed;

    /* ===== TERMINAL / LOGS (VITAL — inchangé) ===== */
    --color-terminal-bg: #1a1a1a;
    --color-terminal-text: #00ff41;

    /* ===== TYPOGRAPHIE ===== */
    /* Stack système moderne (CSP-safe, aucune police externe). */
    --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;

    /* ===== ESPACEMENT (échelle 4px) ===== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    /* ===== RAYONS ===== */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 15px;
    --radius-2xl: 24px; /* nouveau — grandes cartes */
    --radius-pill: 999px; /* nouveau — pastilles, chips */

    /* ===== OMBRES ===== */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06); /* nouveau */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 24px 60px rgba(16, 24, 40, 0.18); /* nouveau */
    --shadow-primary: 0 8px 20px rgba(102, 126, 234, 0.4);

    /* ===== ANNEAU DE FOCUS (accessibilité) ===== */
    --focus-ring: 0 0 0 3px rgba(102, 126, 234, 0.35); /* nouveau */

    /* ===== TRANSITIONS & COURBES ===== */
    --transition-fast: all 0.2s ease;
    --transition: all 0.3s ease;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* nouveau — sorties douces */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* nouveau — léger rebond */

    /* ===================================================================
       REFONTE « RÉGIE » 2026 — tokens ADDITIFS uniquement.
       Aucun token vital ci-dessus n'est modifié. Cette couche pose un
       canevas plus calme, une app bar sombre, et centralise les fonds
       « soft » des statuts (déjà utilisés en dur dans les CSS de page).
       =================================================================== */

    /* Canevas & surfaces (neutres légèrement bleutés — choisis, pas gris pur) */
    --color-canvas: #f4f5f9; /* fond de page calme (remplace le dégradé bleu) */
    --color-surface-2: #fbfbfe; /* surface secondaire : en-têtes de table, toolbars */
    --color-border-strong: #d6d9e6; /* bordure plus marquée : boutons, contours actifs */
    --color-ink: #1e2233; /* encre principale (titres) — indigo très foncé */
    --color-ink-soft: #676d80; /* libellés mono, eyebrows, hints — V-04 (audit 2026-08-25) : #8a90a6 (~3.2:1) assombri pour WCAG AA >=4.5:1 sur blanc/surface-2/canvas */

    /* App bar sombre (le parti pris audacieux, concentré à un seul endroit) */
    --color-appbar: #191c2b;
    --color-appbar-2: #21263c;
    --color-appbar-ink: #eceefb; /* texte des liens de nav sur fond sombre */
    --color-appbar-ink-soft: #a3a9c6; /* liens inactifs */

    /* Accent de marque « profond » pour texte/valeurs sur fond clair
       (dérivé de la marque violette, meilleur contraste que #667eea en texte) */
    --color-primary-deep: #5646c4;

    /* Fonds « soft » des statuts — centralisés (valeurs métier déjà en prod) */
    --color-ok-soft: #e8f5e9;
    --color-overdue-soft: #ffe5e5;
    --color-warn-soft: #fff5e5;
}

/* ===== ANIMATIONS COMMUNES =====
   Centralisées ici pour éviter les redéfinitions par fichier. */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* ===== ACCESSIBILITÉ — prefers-reduced-motion (V-01, audit 2026-08-24) =====
   Neutralise les animations/transitions globales (fadeIn, slideUp, pulse…) pour les
   personnes sensibles au mouvement. WCAG 2.3.3. Complète le bloc déjà dans login.css. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}