/* Préau — overrides CSS pour les composants qui ne lisent pas notre custom_theme
   Cible le système "Compound Design Tokens" d'Element Web (--cpd-*) que le
   custom_theme JSON ne couvre pas.

   Si tu remarques une couleur encore non brandée :
   - Inspecte l'élément (clic droit → Inspecter)
   - Note la variable CSS utilisée (--cpd-color-...)
   - Ajoute-la ici avec la valeur Préau correspondante
*/

:root {
  /* === Palette Préau (rappel) === */
  --preau-orange:     #F07A1E;
  --preau-violet:     #3C3057;
  --preau-turquoise:  #1FB6BB;
  --preau-mint:       #A5DDDF;
  --preau-peach:      #FBE2D0;
  --preau-grey:       #9094A8;
  --preau-bg:         #FBFAF7;

  /* === Compound Design Tokens — action primaire (gros boutons CTA) === */
  --cpd-color-bg-action-primary-rest:     var(--preau-orange);
  --cpd-color-bg-action-primary-hovered:  #D86A0F;
  --cpd-color-bg-action-primary-pressed:  #C45D0A;
  --cpd-color-text-on-solid-primary:      #FFFFFF;

  /* === Compound — accent / liens / mentions === */
  --cpd-color-icon-accent-primary:        var(--preau-orange);
  --cpd-color-text-action-accent:         var(--preau-orange);
  --cpd-color-border-interactive-primary: var(--preau-orange);

  /* === Compound — backgrounds décoratifs (les cartes "Envoyez un message…",
       "Explorez les salons…", "Créez une discussion de groupe" sur le home) === */
  --cpd-color-bg-success-subtle:          var(--preau-peach);
  --cpd-color-bg-info-subtle:             var(--preau-mint);
  --cpd-color-bg-accent-subtle:           var(--preau-peach);
  --cpd-color-bg-decorative-1:            var(--preau-orange);
  --cpd-color-bg-decorative-2:            var(--preau-violet);
  --cpd-color-bg-decorative-3:            var(--preau-turquoise);
  --cpd-color-bg-decorative-4:            var(--preau-mint);
  --cpd-color-bg-decorative-5:            var(--preau-peach);

  --cpd-color-icon-success-primary:       var(--preau-orange);
  --cpd-color-icon-info-primary:          var(--preau-turquoise);
  --cpd-color-icon-on-solid-primary:      #FFFFFF;

  /* === Compound — états visuels === */
  --cpd-color-text-success-primary:       #2D8A3E;  /* on garde du vert sémantique pour "succès" cohérent */
  --cpd-color-text-critical-primary:      #B83A3A;
  --cpd-color-text-info-primary:          var(--preau-turquoise);

  /* === Variables legacy Element (au cas où) === */
  --accent:                               var(--preau-orange);
  --accent-1600:                          var(--preau-orange);
  --primary-content:                      var(--preau-violet);
  --secondary-content:                    var(--preau-grey);
}

/* === Mode sombre : on inverse certaines couleurs === */
.cpd-theme-dark,
[data-mx-theme="preau-dark"] {
  --cpd-color-bg-action-primary-rest:     var(--preau-orange);
  --cpd-color-bg-action-primary-hovered:  #D86A0F;
  --cpd-color-bg-action-primary-pressed:  #C45D0A;
  --cpd-color-bg-success-subtle:          rgba(240, 122, 30, 0.15);
  --cpd-color-bg-info-subtle:             rgba(31, 182, 187, 0.18);
  --cpd-color-bg-accent-subtle:           rgba(240, 122, 30, 0.18);
}

/* === Ciblage spécifique des 3 cartes "home" qui restent vertes
       (fallback si les variables Compound ci-dessus ne suffisent pas) === */
.mx_HomePage_button_sendDm,
.mx_HomePage_button_explore,
.mx_HomePage_button_createGroup {
  background-color: var(--preau-orange) !important;
  color: white !important;
}
.mx_HomePage_button_sendDm:hover,
.mx_HomePage_button_explore:hover,
.mx_HomePage_button_createGroup:hover {
  background-color: #D86A0F !important;
}

/* Hover sur les boutons d'action primaire */
button[data-kind="primary"]:hover {
  background-color: #D86A0F !important;
}