/* =====================================================================
   BlaBlaBot — jetons de thème clair / sombre
   blablabot.agencecentaure.fr

   Trois états, comme l'Assistant Centaure (v344) :
     - aucun attribut sur <html>        → suit l'appareil (prefers-color-scheme)
     - <html data-theme="light">         → clair imposé
     - <html data-theme="dark">          → sombre imposé
   Le choix est enregistré dans users.theme_pref (auto | light | dark) : le
   serveur pose data-theme sur <html> dès la première ligne, sans flash. Les
   pages sans compte (connexion) relisent le dernier choix (theme-boot.js).

   Règle : aucun composant n'utilise une couleur en dur. Tout passe par
   ces jetons ; les blocs sombres ne font que les redéfinir.
   ===================================================================== */

:root {
  /* Marque (couleurs du logo) */
  --brand-ink:     #0b3e6a;   /* « BLA » bleu nuit */
  --brand-orange:  #e29a41;   /* « BLA » orange */
  --brand-cyan:    #21c5ee;   /* « BOT » cyan */

  /* Logo : la partie bleu nuit devient claire en mode sombre */
  --logo-ink:      var(--brand-ink);
  --logo-orange:   var(--brand-orange);
  --logo-cyan:     var(--brand-cyan);

  /* Surfaces et texte (gris teintés vers le bleu nuit, jamais un gris neutre) */
  --bg:            #f4f7fa;
  --surface:       #ffffff;
  --surface-2:     #eaf0f6;
  --line:          #d6e0ea;
  --fg:            #0f2236;
  --fg-muted:      #55687c;

  /* Interaction */
  --accent:        #0b3e6a;   /* boutons principaux, liens */
  --accent-fg:     #ffffff;
  --accent-soft:   #dceaf6;
  --focus:         #21c5ee;
  --highlight:     #e29a41;   /* faits rigolos, nouveautés */
  --highlight-soft:#fbeedd;

  /* États (séparés de la marque) */
  --ok:            #1f7a4d;   --ok-soft:   #dff3e8;
  --warn:          #9a5b00;   --warn-soft: #fbefd9;
  --crit:          #b4232c;   --crit-soft: #fbe2e3;

  /* Ombres et rayons */
  --shadow:        0 1px 2px rgba(15, 34, 54, .06), 0 4px 16px rgba(15, 34, 54, .06);
  --radius:        10px;
  --radius-s:      6px;

  /* Typographie */
  /* Polices du système : aucun appel à un service extérieur (règle Centaure) */
  --font-display:  "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-body:     "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-data:     ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  color-scheme: light;
}

/* Sombre selon l'appareil, sauf si l'utilisateur a imposé le clair */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --logo-ink:      #e6eef6;
    --bg:            #0b1622;
    --surface:       #112130;
    --surface-2:     #172b3d;
    --line:          #24394d;
    --fg:            #e6eef6;
    --fg-muted:      #9db0c2;
    --accent:        #21c5ee;
    --accent-fg:     #062033;
    --accent-soft:   #12384d;
    --focus:         #e29a41;
    --highlight:     #f0b469;
    --highlight-soft:#3a2a14;
    --ok:            #5fd29a;   --ok-soft:   #133526;
    --warn:          #f2b552;   --warn-soft: #3a2a10;
    --crit:          #ff8a8f;   --crit-soft: #3d1619;
    --shadow:        0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}

/* Sombre imposé : mêmes valeurs, pour que le choix gagne dans les deux sens */
:root[data-theme="dark"] {
  --logo-ink:      #e6eef6;
  --bg:            #0b1622;
  --surface:       #112130;
  --surface-2:     #172b3d;
  --line:          #24394d;
  --fg:            #e6eef6;
  --fg-muted:      #9db0c2;
  --accent:        #21c5ee;
  --accent-fg:     #062033;
  --accent-soft:   #12384d;
  --focus:         #e29a41;
  --highlight:     #f0b469;
  --highlight-soft:#3a2a14;
  --ok:            #5fd29a;   --ok-soft:   #133526;
  --warn:          #f2b552;   --warn-soft: #3a2a10;
  --crit:          #ff8a8f;   --crit-soft: #3d1619;
  --shadow:        0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

/* Socle */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
}

/* Logo SVG en ligne : les classes d'Illustrator sont reliées aux jetons */
.bb-logo .st5, .bb-logo .st1, .bb-logo .st3 { fill: var(--logo-ink); }
.bb-logo .st2, .bb-logo .st4               { fill: var(--logo-orange); }
.bb-logo .st0                              { fill: var(--logo-cyan); }

/* Bascule douce, coupée pour qui préfère moins d'animations */
@media (prefers-reduced-motion: no-preference) {
  body, .bb-surface { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }