@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* ========== LAYOUT ========== */
    --sidebar-width: 252px;
    --panel-width: 420px;
    /* ========== TYPOGRAPHIE ========== */
    /* Une seule famille, Geist, pour les titres comme pour le corps. La maquette
       proposait des titres condensés (Barlow Condensed) : écarté au profit de la
       police d'origine. La hiérarchie repose donc sur la taille, la graisse et la
       couleur, pas sur un contraste de familles. Le seuil reste ici : redéfinir
       --font-heading suffit à rebasculer tous les titres de l'app. */
    --font-body: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: var(--font-body);
    /* ========== SURFACES CARTES ========== */
    /* Bordures et ombres des cartes teintées de l'accent marine plutôt que neutres :
       c'est ce qui donne son liant à la page. */
    --card-radius: 10px;
    --card-border: rgba(11, 21, 106, 0.09);
    --card-divider: rgba(11, 21, 106, 0.08);
    --card-shadow: 0 1px 2px rgba(11, 21, 106, 0.04);
    --card-shadow-hover: 0 4px 16px rgba(11, 21, 106, 0.08);
    --control-border: rgba(11, 21, 106, 0.11);
    --row-hover: rgba(2, 132, 199, 0.04);
    /* ========== COQUE APPLICATIVE ========== */
    --app-shell-bg: linear-gradient(170deg, #0284c7 -12%, #061024 58%, #04050e 100%);
    --content-bg: #fbfcfe;
    --sidebar-active-bar: #38bdf8;
    /* ========== COULEURS PRINCIPALES ========== */
    --color-primary: #0284c7;
    --color-primary-hover: #0369a1;
    --color-primary-light: rgba(2, 132, 199, 0.08);
    /* Fond bleu très clair, auparavant codé en dur (#f0f9ff) dans de nombreux composants. */
    --color-primary-bg: #f0f9ff;
    --color-accent: #0B156A;
    --color-accent-hover: #101D94;
    --color-accent-light: rgba(11, 21, 106, 0.08);
    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
    --color-danger-light: rgba(239, 68, 68, 0.08);
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-warning-border: #fcd34d;
    --color-warning-text: #92400e;
    --color-success: #16a34a;
    --color-success-light: rgba(22, 163, 74, 0.08);
    --color-info: #3b82f6;
    /* --color-info sert de couleur de TEXTE sur --color-info-light : le bleu 500 sur un lavis
       clair tombe sous le seuil AA pour du 0.75rem, d'où un token de texte distinct — même
       découpage que le triplet --color-warning-* ci-dessus.

       L'alpha (0.14) est apparié à --color-accent-light pour que les deux pastilles pèsent
       pareil : accent-light est 8 % d'un marine très sombre (#0B156A), info-light un bleu 500
       bien plus clair. À alpha égal, le lavis bleu passe pour un absence de fond — mesuré, un
       même 0.08/0.10 donne ΔL* 6.4 pour l'accent contre 4.6 pour l'info, et 4.6 sur blanc ne
       se lit pas comme une pastille. 0.14 ramène l'info à ΔL* 6.4. Ne pas rebaisser sans
       revérifier RobotPlatformBadge côte à côte. */
    --color-info-light: rgba(59, 130, 246, 0.14);
    --color-info-text: #1e40af;
    --color-sidebar: white;
    --color-panel-left: #000111;
    /* ========== GRAPHIQUES ========== */
    --color-chart-success: #22c55e;
    --color-chart-failure: #f43f5e;
    --color-chart-warning: #fbbf24;
    --color-chart-cancelled: #94a3b8;
    /* ========== OVERLAYS ========== */
    --overlay-bg: rgba(15, 23, 42, 0.5);
    /* ========== BACKGROUNDS ========== */
    --color-bg: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-bg-tertiary: #f1f5f9;
    /* ========== TEXTES ========== */
    --color-text: #0f172a;
    --color-text-secondary: #1F1E1D;
    --color-text-muted: #94a3b8;
    --color-text-subtle: #64748b;
    /* ========== BORDURES ========== */
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    /* ========== SIDEBAR ========== */
    --sidebar-bg: #0f172a;
    --sidebar-text: #f8fafc;
    --sidebar-text-secondary: #94a3b8;
    --sidebar-hover: rgba(255, 255, 255, 0.04);
    --sidebar-active: rgba(14, 165, 233, 0.12);
    --sidebar-border: rgba(255, 255, 255, 0.06);
    /* ========== SPACING ========== */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    /* ========== RAYONS ========== */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    /* ========== OMBRES ========== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.12);
    /* ========== TRANSITIONS ========== */
    --transition-fast: 0.12s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    /* Courbe commune à toutes les transitions de la maquette. */
    --ease-smooth: cubic-bezier(0.2, 0.6, 0.2, 1);
    --transition-smooth: 0.18s cubic-bezier(0.2, 0.6, 0.2, 1);
    /* ========== Z-INDEX ========== */
    --z-content: 1;
    --z-dropdown: 50;
    --z-sidebar: 90;
    --z-panel-overlay: 100;
    --z-panel: 101;
    --z-modal-overlay: 200;
    --z-modal: 201;
    /* Calque de recherche ouvert par-dessus une modale (SearchableSelect). */
    --z-picker-overlay: 300;
    --z-toast: 10000;
}

/* ========== THÈME SOMBRE (beta) ==========
   Appliqué quand <html data-theme="dark"> est posé par js/theme.js, selon le choix
   Système / Clair / Sombre de l'utilisateur (page Paramètres). En mode "Système",
   theme.js pose l'attribut d'après prefers-color-scheme et suit les bascules de l'OS.
   N'affecte que les surfaces qui consomment les tokens ci-dessous ; quelques couleurs
   encore codées en dur dans certains composants peuvent nécessiter un ajustement visuel.
   Le mode clair par défaut n'est pas modifié. */
:root[data-theme="dark"] {
        --color-primary-light: rgba(2, 132, 199, 0.22);
        --color-primary-bg: rgba(2, 132, 199, 0.16);
        /* --color-accent sert aussi de couleur de TEXTE (badge "Super Admin", statut "Réussi").
           Le marine foncé du mode clair est illisible sur fond sombre → on l'éclaircit. */
        --color-accent: #818cf8;
        --color-accent-hover: #a5b4fc;
        --color-accent-light: rgba(129, 140, 248, 0.20);
        --color-danger-light: rgba(239, 68, 68, 0.22);
        --color-warning-light: #3a2e0b;
        --color-warning-border: #5c4708;
        --color-warning-text: #fcd34d;
        /* Même raison que --color-accent : le bleu 500 est illisible sur fond sombre. */
        --color-info: #60a5fa;
        --color-info-light: rgba(96, 165, 250, 0.20);
        --color-info-text: #bfdbfe;
        /* Vert plus clair pour rester lisible sur fond sombre. */
        --color-success: #22c55e;
        --color-success-light: rgba(34, 197, 94, 0.20);

        --overlay-bg: rgba(0, 0, 0, 0.6);

        --color-bg: #111827;
        --color-bg-secondary: #0b1220;
        --color-bg-tertiary: #1f2937;

        --color-text: #f1f5f9;
        --color-text-secondary: #e5e7eb;
        --color-text-muted: #94a3b8;
        --color-text-subtle: #cbd5e1;

        --color-border: #1f2937;
        --color-border-light: #161f2e;

        /* NB : --color-sidebar est la couleur du TEXTE du menu latéral (valeur "white"),
           pas un fond — on la laisse claire en sombre, donc aucun override ici. */

        /* Les tokens de carte teintés marine tombent à plat sur fond sombre. */
        --card-border: #1f2937;
        --card-divider: #1f2937;
        --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.6);
        --control-border: #2b3648;
        --row-hover: rgba(2, 132, 199, 0.10);
        --content-bg: #0b1220;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.55);
        --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
        --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.65);
}