/* Overrides publicos — mapeia classes Tailwind comuns para CSS Variables */

body:not(.sd-admin) #root header,
body:not(.sd-admin) #root nav[class*="bg-"] {
  background-color: var(--header-color) !important;
  color: var(--text-color) !important;
}

body:not(.sd-admin) #root footer,
body:not(.sd-admin) .sd-public-footer {
  background-color: var(--footer-color) !important;
  color: var(--gray-dark-color) !important;
}

/* Cabecalho/rodape brancos — textos legiveis */
body:not(.sd-admin) #root header h1,
body:not(.sd-admin) #root header p,
body:not(.sd-admin) #root header span {
  color: inherit;
}

/* Botao Comecar a Pedir + CTAs rose → verde agua Supresoft */
body:not(.sd-admin) #root .bg-rose-500,
body:not(.sd-admin) #root .bg-rose-600,
body:not(.sd-admin) #root .bg-rose-700,
body:not(.sd-admin) #root .hover\:bg-rose-600:hover,
body:not(.sd-admin) #root .hover\:bg-rose-700:hover,
body:not(.sd-admin) #root .group-hover\:bg-rose-600:hover,
body:not(.sd-admin) #root .group-hover\:bg-rose-700:hover,
body:not(.sd-admin) #root button[class*="bg-rose"],
body:not(.sd-admin) #root a[class*="bg-rose"],
body:not(.sd-admin) #root div[class*="bg-rose-600"] {
  background-color: var(--button-color, #3CDAAC) !important;
  color: #ffffff !important;
  border-color: var(--button-color, #3CDAAC) !important;
}

/* Sacolinha e icones rose → verde agua */
body:not(.sd-admin) #root .text-rose-500,
body:not(.sd-admin) #root .text-rose-600,
body:not(.sd-admin) #root .text-rose-700,
body:not(.sd-admin) #root svg.text-rose-500,
body:not(.sd-admin) #root svg.text-rose-600 {
  color: var(--icon-color, #3CDAAC) !important;
  stroke: var(--icon-color, #3CDAAC) !important;
}

body:not(.sd-admin) #root .border-rose-100,
body:not(.sd-admin) #root .border-rose-200 {
  border-color: color-mix(in srgb, var(--icon-color, #3CDAAC) 25%, white) !important;
}

body:not(.sd-admin) #root .bg-emerald-500,
body:not(.sd-admin) #root .bg-emerald-600,
body:not(.sd-admin) #root .bg-emerald-700,
body:not(.sd-admin) #root .hover\:bg-emerald-600:hover,
body:not(.sd-admin) #root .hover\:bg-emerald-700:hover,
body:not(.sd-admin) #root button[class*="bg-emerald"],
body:not(.sd-admin) #root a[class*="bg-emerald"] {
  background-color: var(--button-color) !important;
  color: var(--button-text-color) !important;
}

body:not(.sd-admin) #root .text-emerald-600,
body:not(.sd-admin) #root .text-emerald-500,
body:not(.sd-admin) #root a.text-emerald-600,
body:not(.sd-admin) #root .text-teal-600 {
  color: var(--link-color) !important;
}

body:not(.sd-admin) #root .border-emerald-500,
body:not(.sd-admin) #root .border-emerald-600 {
  border-color: var(--primary-color) !important;
}

body:not(.sd-admin) #root .bg-slate-900,
body:not(.sd-admin) #root .bg-\[\#02003C\] {
  background-color: var(--header-color) !important;
}

body:not(.sd-admin) #root .text-slate-900 {
  color: var(--text-color) !important;
}

body:not(.sd-admin) #root .bg-white.rounded,
body:not(.sd-admin) #root .bg-white.rounded-xl,
body:not(.sd-admin) #root .bg-white.rounded-2xl,
body:not(.sd-admin) #root .bg-white.shadow-sm {
  background-color: var(--card-color) !important;
}

body:not(.sd-admin) #root svg.text-emerald-600,
body:not(.sd-admin) #root svg[class*="text-emerald"] {
  color: var(--icon-color) !important;
  stroke: var(--icon-color) !important;
}

[data-theme="dark"] body:not(.sd-admin) #root {
  background-color: var(--dark-background) !important;
  color: var(--dark-text) !important;
}

[data-theme="dark"] body:not(.sd-admin) #root .bg-white {
  background-color: var(--dark-card) !important;
  color: var(--dark-text) !important;
}