// base/_root.scss

:root {
  // --- 1. COULEURS (MagixCMS + Génération Bootstrap 5) ---
  // On boucle UNE SEULE FOIS sur votre map pour tout générer !
  @each $key, $value in $theme-color-map {

    // A. Vos variables Magix (Génération de la palette)
    $palette: generate-palette($value);
    --#{$key}-color-darker:  #{map-get($palette, "darker")};
    --#{$key}-color-dark:    #{map-get($palette, "dark")};
    --#{$key}-color:         #{$value};
    --#{$key}-color-light:   #{map-get($palette, "light")};
    --#{$key}-color-lighter: #{map-get($palette, "lighter")};

    // B. Passerelle Bootstrap (pour que .text-primary, bg-success etc. fonctionnent)
    --bs-#{$key}: #{$value};
    --bs-#{$key}-rgb: #{red($value)}, #{green($value)}, #{blue($value)};
  }

  // --- 2. TYPOGRAPHIE ---
  --mc-font-scale: 1;
  --fz-base: calc(#{$font-size-base} * var(--mc-font-scale));

  // 🟢 NOUVEAU : Boucle SASS pour générer des variables CSS fluides pour h1 à h6
  @each $level, $size in $headings-font-sizes {
    // Clamp plus "doux" que les display :
    // Min : 80% de la taille de base (0.8)
    // Fluide : 1.5vw + 60% de la taille
    // Max : La taille de base
    --fluid-h#{$level}: clamp(#{$size} * 0.8, 1.5vw + #{$size} * 0.6, #{$size});

    // On génère la variable finale utilisée par le CSS
    --fz-h#{$level}: calc(var(--fluid-h#{$level}) * var(--mc-font-scale, 1));
  }

  // --- 3. LAYOUT & SPACERS ---
  // 🟢 CORRECTION : On relie au moteur de Bootstrap au lieu de forcer #fff
  --body-bg: var(--bs-body-bg);
  --spacer: #{$spacer};
  --grid-gutter: var(--spacer);
  --toolbar-h: 0px;
  --header-h: #{$header-h};

  // 🟢 CENTRE DE CONTRÔLE DU HEADER (Connecté au mode sombre)
  --header-bg: var(--bs-body-bg);          // Sera blanc en mode clair, sombre en mode sombre
  --header-text: var(--bs-body-color);     // Sera foncé en mode clair, clair en mode sombre
  --header-text-hover: var(--main-color);

  --footbar-text: var(--bs-body-color);

  @include media-breakpoint-up(md) {
    --toolbar-h: #{$toolbar-h};
  }

  // Définition des couleurs pour le mode sombre
  [data-bs-theme="dark"] {
    // Ici, on remplace vos variables UNIQUEMENT quand le mode sombre est actif
    --body-bg: #121212; // Un noir profond

    --header-bg: #1a1d20; // Un gris très sombre pour le header
    --header-text: #f8f9fa; // Un blanc cassé pour lire confortablement

    // --main-color reste la même, donc votre bleu/rouge au survol fonctionnera toujours !

    .bg-white {
      background-color: var(--bs-body-bg) !important;
    }

    // 2. Les fonds gris clairs (bg-light) deviennent un gris sombre contrasté
    .bg-light {
      background-color: var(--bs-secondary-bg) !important;
    }

    // 3. Correction pour les petits tags de news (badge bg-light text-secondary)
    // Pour éviter que le texte gris foncé soit illisible sur le nouveau fond sombre
    .text-secondary {
      color: #adb5bd !important; // Un gris clair lisible
    }
  }

  //--footbar-text: #212529;
}