/* Sooma Chat — acento da interface.
   O verde do Element e o acento da marca; o verde semantico de "sucesso"
   mantem-se verde, porque vermelho ali significaria erro.
   Tokens de marca: identidade #EB1D25; interface #E91A24 (claro) / #F9302E (escuro).
   Nunca usar o vermelho de identidade como cor de texto ou de botao. */

:root{
  --sooma-red:             #EB1D25;
  --sooma-red-ui:          #E91A24;
  --sooma-red-hover:       #D10013;
  --sooma-red-active:      #BD0004;
  --sooma-red-tint:        #FDE4E5;
  --sooma-red-tint-strong: #FBD2D3;
  --sooma-red-dark-ui:     #F9302E;
  --sooma-mirage:          #121B26;
}

.cpd-theme-light.cpd-theme-light,
.cpd-theme-light-hc.cpd-theme-light-hc{
  --cpd-color-bg-accent-rest:        var(--sooma-red-ui) !important;
  --cpd-color-bg-accent-hovered:     var(--sooma-red-hover) !important;
  --cpd-color-bg-accent-pressed:     var(--sooma-red-active) !important;
  --cpd-color-bg-accent-selected:    color-mix(in srgb, var(--sooma-red-ui) 11%, transparent) !important;
  --cpd-color-bg-badge-accent:       var(--sooma-red-tint) !important;
  --cpd-color-border-accent-primary: var(--sooma-red-ui) !important;
  --cpd-color-border-accent-subtle:  var(--sooma-red-tint-strong) !important;
  --cpd-color-icon-accent-primary:   var(--sooma-red-ui) !important;
  --cpd-color-icon-accent-tertiary:  var(--sooma-red-hover) !important;
  --cpd-color-text-action-accent:    var(--sooma-red-ui) !important;
  --cpd-color-text-badge-accent:     var(--sooma-red-active) !important;
}

.cpd-theme-dark.cpd-theme-dark,
.cpd-theme-dark-hc.cpd-theme-dark-hc{
  --cpd-color-bg-accent-rest:        var(--sooma-red-dark-ui) !important;
  --cpd-color-bg-accent-hovered:     color-mix(in srgb, var(--sooma-red-dark-ui) 82%, white) !important;
  --cpd-color-bg-accent-pressed:     color-mix(in srgb, var(--sooma-red-dark-ui) 68%, white) !important;
  --cpd-color-bg-accent-selected:    color-mix(in srgb, var(--sooma-red-dark-ui) 23%, transparent) !important;
  --cpd-color-bg-badge-accent:       color-mix(in srgb, var(--sooma-red-dark-ui) 22%, var(--sooma-mirage)) !important;
  --cpd-color-border-accent-primary: var(--sooma-red-dark-ui) !important;
  --cpd-color-border-accent-subtle:  color-mix(in srgb, var(--sooma-red-dark-ui) 45%, var(--sooma-mirage)) !important;
  --cpd-color-icon-accent-primary:   var(--sooma-red-dark-ui) !important;
  --cpd-color-icon-accent-tertiary:  color-mix(in srgb, var(--sooma-red-dark-ui) 82%, white) !important;
  --cpd-color-text-action-accent:    var(--sooma-red-dark-ui) !important;
  --cpd-color-text-badge-accent:     color-mix(in srgb, var(--sooma-red-dark-ui) 60%, white) !important;
}

/* Acento legado do Element (#0dbd8b), ainda usado em regras antigas. */
:root, .cpd-theme-light.cpd-theme-light{
  --accent-color:     var(--sooma-red-ui) !important;
  --accent-color-300: var(--sooma-red-tint-strong) !important;
}
.cpd-theme-dark.cpd-theme-dark{
  --accent-color:     var(--sooma-red-dark-ui) !important;
  --accent-color-300: color-mix(in srgb, var(--sooma-red-dark-ui) 35%, var(--sooma-mirage)) !important;
}

/* Os tres atalhos da pagina inicial. Branco sobre vermelho, com o token de
   interface #E91A24 (4,53:1 com branco — passa o WCAG AA). O token que o
   Element la tinha era de texto, nao de fundo; fica explicito aqui. */
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton{
  background-color: var(--sooma-red-ui) !important;
  color: #fff !important;
  border: none !important;
}
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton svg{
  color: #fff !important;
}
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:hover{
  background-color: var(--sooma-red-hover) !important;
}
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:active{
  background-color: var(--sooma-red-active) !important;
}
/* No escuro fica igual: branco sobre #E91A24. O #F9302E existe para texto e
   icones SOBRE fundo escuro, nao como enchimento de botao — branco sobre ele
   da 3,83:1 e chumbava o AA a 15px. */