/* ==========================================================================
   ChatBot SaaS — Design tokens (refonte UI/UX)
   Un seul fichier source pour la palette "moderne, minimaliste, épurée" —
   consommé par le dashboard Django (ce fichier) et par la SPA workspace
   (mêmes noms de variables, cf. frontend/workspace/src/theme.css).

   Chargé AVANT dashboard.css : ce fichier pose les jetons --cbs-* et les
   reroute vers le namespace --expo-* du thème Expodash (Bootstrap rebrandé),
   dashboard.css ne fait plus que des correctifs de détail par-dessus.
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    --cbs-surface: #FFFFFF;
    --cbs-bg: #F7F8FA;
    --cbs-border: #E5E7EB;
    --cbs-text: #1A1C21;
    --cbs-text-muted: #6B7280;

    /* Accent = Noir Boafo (charte §3.1). --cbs-accent-fg est la couleur de
       texte/icône posée SUR l'accent (blanc en light, noir en dark) : garde
       les boutons/marques pleins lisibles sans dupliquer la logique clair/sombre
       partout où un `color: #fff` était auparavant codé en dur. */
    --cbs-accent: #0A0A0A;
    --cbs-accent-hover: #262626;
    --cbs-accent-subtle: #F0F0F1;
    --cbs-accent-rgb: 10, 10, 10;
    --cbs-accent-fg: #FFFFFF;

    /* Rouge Boafo — réservé à l'accent signal unique (charte §3.2/3.3),
       jamais utilisé ici comme couleur d'interface récurrente. */
    --cbs-signal: #FF3B1F;
    --cbs-signal-rgb: 255, 59, 31;

    /* Statuts fonctionnels — palette indépendante de la charte de marque. */
    --cbs-success: #178A63;
    --cbs-success-rgb: 23, 138, 99;
    --cbs-warning: #B4770F;
    --cbs-warning-rgb: 180, 119, 15;
    --cbs-danger: #C53E37;
    --cbs-danger-rgb: 197, 62, 55;
    --cbs-info: #2A6FCB;
    --cbs-info-rgb: 42, 111, 203;
}

[data-bs-theme="dark"] {
    --cbs-surface: #15171C;
    --cbs-bg: #0E0F13;
    --cbs-border: #2A2D34;
    --cbs-text: #F1F2F5;
    --cbs-text-muted: #9AA0AC;

    /* Accent = Blanc Boafo en mode sombre (inversion du logo, charte §2.5). */
    --cbs-accent: #F5F5F7;
    --cbs-accent-hover: #D8D9DE;
    --cbs-accent-subtle: #1E1F24;
    --cbs-accent-rgb: 245, 245, 247;
    --cbs-accent-fg: #0A0A0A;

    --cbs-signal: #FF3B1F;
    --cbs-signal-rgb: 255, 59, 31;

    --cbs-success: #178A63;
    --cbs-success-rgb: 23, 138, 99;
    --cbs-warning: #B4770F;
    --cbs-warning-rgb: 180, 119, 15;
    --cbs-danger: #C53E37;
    --cbs-danger-rgb: 197, 62, 55;
    --cbs-info: #2A6FCB;
    --cbs-info-rgb: 42, 111, 203;
}

/* ==========================================================================
   Rythme & forme (indépendants du thème clair/sombre)
   ========================================================================== */

:root {
    /* Typographie (charte §4.1) : Manrope pour la marque et les titres,
       Inter pour le texte courant, JetBrains Mono pour les labels/métadonnées. */
    --cbs-font-heading: 'Manrope', system-ui, sans-serif;
    --cbs-font-body: 'Inter', system-ui, sans-serif;
    --cbs-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --cbs-space-1: 4px;
    --cbs-space-2: 8px;
    --cbs-space-3: 12px;
    --cbs-space-4: 16px;
    --cbs-space-6: 24px;
    --cbs-space-8: 32px;
    --cbs-space-12: 48px;
    --cbs-space-16: 64px;

    --cbs-radius-sm: 6px;
    /* boutons, badges */
    --cbs-radius: 8px;
    /* cartes, champs */
    --cbs-shadow-float: 0 4px 16px rgba(0, 0, 0, .08);
    /* menus, modales, toasts */
}

/* ==========================================================================
   Reroutage vers le namespace Bootstrap/Expodash (--expo-*)
   Les templates existants utilisent déjà .btn-primary, .bg-success-subtle,
   .text-danger, etc. — on ne touche à aucune classe, seulement aux variables
   qu'elles consomment, pour que la cascade des 21 pages existantes profite
   du nouveau système sans réécriture.
   ========================================================================== */

[data-bs-theme="light"],
[data-bs-theme="dark"] {
    /* Neutres */
    --expo-body-bg: var(--cbs-bg);
    --expo-body-color: var(--cbs-text);
    --expo-border-color: var(--cbs-border);
    --expo-secondary-color: var(--cbs-text-muted);
    --expo-secondary-bg: var(--cbs-bg);
    --expo-tertiary-bg: var(--cbs-bg);
    --expo-emphasis-color: var(--cbs-text);

    /* Accent unique (indigo) — actions principales, liens, item de nav actif, focus */
    --expo-primary: var(--cbs-accent);
    --expo-primary-rgb: var(--cbs-accent-rgb);
    --expo-primary-bg-subtle: var(--cbs-accent-subtle);
    --expo-primary-border-subtle: var(--cbs-accent-subtle);
    --expo-primary-text-emphasis: var(--cbs-accent);
    --expo-link-color: var(--cbs-accent);
    --expo-link-color-rgb: var(--cbs-accent-rgb);
    --expo-link-hover-color: var(--cbs-accent-hover);

    /* Sémantique — réservée aux badges de statut / retours système */
    --expo-success: var(--cbs-success);
    --expo-success-rgb: var(--cbs-success-rgb);
    --expo-success-bg-subtle: rgba(var(--cbs-success-rgb), 0.12);
    --expo-success-border-subtle: rgba(var(--cbs-success-rgb), 0.3);
    --expo-success-text-emphasis: var(--cbs-success);

    --expo-warning: var(--cbs-warning);
    --expo-warning-rgb: var(--cbs-warning-rgb);
    --expo-warning-bg-subtle: rgba(var(--cbs-warning-rgb), 0.12);
    --expo-warning-border-subtle: rgba(var(--cbs-warning-rgb), 0.3);
    --expo-warning-text-emphasis: var(--cbs-warning);

    --expo-danger: var(--cbs-danger);
    --expo-danger-rgb: var(--cbs-danger-rgb);
    --expo-danger-bg-subtle: rgba(var(--cbs-danger-rgb), 0.12);
    --expo-danger-border-subtle: rgba(var(--cbs-danger-rgb), 0.3);
    --expo-danger-text-emphasis: var(--cbs-danger);

    --expo-info: var(--cbs-info);
    --expo-info-rgb: var(--cbs-info-rgb);
    --expo-info-bg-subtle: rgba(var(--cbs-info-rgb), 0.12);
    --expo-info-border-subtle: rgba(var(--cbs-info-rgb), 0.3);
    --expo-info-text-emphasis: var(--cbs-info);

    /* Rayons — modestes, pas de style "bulle" */
    --expo-border-radius: var(--cbs-radius-sm);
    --expo-border-radius-sm: var(--cbs-radius-sm);
    --expo-border-radius-lg: var(--cbs-radius);
    --expo-border-radius-xl: var(--cbs-radius);
}

/* Boutons & badges : rayon modeste (6px) partagé par tous les variants */
.btn,
.badge {
    --expo-btn-border-radius: var(--cbs-radius-sm);
    --expo-btn-border-radius-sm: var(--cbs-radius-sm);
    --expo-btn-border-radius-lg: var(--cbs-radius-sm);
    border-radius: var(--cbs-radius-sm);
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
    --expo-btn-bg: var(--cbs-accent);
    --expo-btn-border-color: var(--cbs-accent);
    --expo-btn-hover-bg: var(--cbs-accent-hover);
    --expo-btn-hover-border-color: var(--cbs-accent-hover);
    --expo-btn-active-bg: var(--cbs-accent-hover);
    --expo-btn-active-border-color: var(--cbs-accent-hover);
}

/* Cartes : posées à plat, bordure fine, pas d'ombre (l'ombre reste réservée
   aux éléments qui flottent réellement — menus, modales, toasts) */
.card {
    --expo-card-border-radius: var(--cbs-radius);
    --expo-card-inner-border-radius: var(--cbs-radius);
    --expo-card-box-shadow: none;
    box-shadow: none;
}

.dropdown-menu,
.modal-content,
.toast {
    box-shadow: var(--cbs-shadow-float) !important;
}

/* Chiffres tabulaires — convention existante, reconduite partout */
.tabular,
.cbs-num,
.cbs-kpi-value {
    font-variant-numeric: tabular-nums;
}

/* Anneau de focus au clavier, sur l'accent unique */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
a:focus-visible {
    outline: 2px solid var(--cbs-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(var(--cbs-accent-rgb), 0.35) !important;
}