/* Override de classes Tailwind CSS para usar variáveis globais */

/* Forçar cores específicas com !important */
body {
    background-color: var(--color-background) !important;
}

body.landing-dark {
    background-color: var(--color-primary-dark) !important;
    color: var(--color-text-on-dark);
}

body.landing-dark .text-white {
    color: var(--text-main) !important;
}

/* Headers e Fundos Principais - Cor Primária Escura */
header.bg-blue-600,
.bg-gradient-primary {
    background: var(--gradient-primary) !important;
}

/* Botões CTA e Elementos Interativos - Cor de Destaque Principal */
.bg-accent,
.bg-purple-600,
.btn-primary {
    background-color: var(--color-accent) !important;
}

/* Botões secundários - Roxo Médio */
.bg-purple-700 {
    background-color: var(--color-secondary) !important;
}

.text-purple-600,
.text-accent {
    color: var(--color-accent) !important;
}

/* Hover States - Variação Mais Clara */
.hover\:bg-purple-800:hover,
.hover\:bg-accent:hover {
    background-color: var(--color-accent-hover) !important;
}

/* Menu hover states - ensure purple colors */
.hover\:bg-purple-800:hover {
    background-color: var(--color-accent-hover) !important;
}

.hover\:text-purple-700:hover {
    color: var(--color-accent-hover) !important;
}

/* Elementos Secundários */
.bg-white,
.card {
    background-color: var(--color-white) !important;
}

/* Textos */
.text-gray-700,
.text-primary {
    color: var(--color-text-primary) !important;
}

.text-gray-600,
.text-secondary {
    color: var(--color-text-secondary) !important;
}

/* Bordas */
.border-gray-300,
.border-default {
    border-color: var(--color-border) !important;
}

/* Cores de Status */
.text-red-500,
.text-error {
    color: var(--color-error) !important;
}

.text-red-600,
.text-error-dark {
    color: var(--color-error-dark) !important;
}

/* Background colors */
.bg-gray-100 {
    background-color: var(--color-background) !important;
}

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

/* Cabeçalho e áreas escuras - Azul Escuro/Navy */
.bg-blue-600 {
    background-color: var(--color-primary-dark) !important;
}

/* Rodapé e áreas de contraste máximo - bg-deep-black */
.bg-gray-800 {
    background-color: var(--bg-deep-black) !important;
}

.bg-purple-800:hover {
    background-color: var(--color-primary-hover) !important;
}

.bg-purple-900:hover {
    background-color: var(--color-primary-medium-hover) !important;
}

.bg-purple-50:hover {
    background-color: color-mix(in srgb, var(--primary-action) 12%, transparent) !important;
}

.bg-purple-100 {
    background-color: color-mix(in srgb, var(--primary-action) 12%, transparent) !important;
}

/* Botões secundários */
.bg-green-600 {
    background-color: var(--color-success) !important;
}

.bg-red-600 {
    background-color: var(--color-error) !important;
}

.bg-gray-600 {
    background-color: var(--color-gray-600) !important;
}

.bg-red-100 {
    background-color: color-mix(in srgb, var(--color-error) 12%, transparent) !important;
}

.bg-green-100 {
    background-color: color-mix(in srgb, var(--color-success) 12%, transparent) !important;
}

.bg-yellow-100 {
    background-color: color-mix(in srgb, var(--color-warning) 12%, transparent) !important;
}

/* Text colors */
.text-white {
    color: var(--color-white) !important;
}

.text-gray-800 {
    color: var(--color-text-primary) !important;
}

.text-gray-700 {
    color: var(--color-gray-700) !important;
}

.text-gray-600 {
    color: var(--color-text-secondary) !important;
}

.text-purple-700:hover {
    color: var(--color-accent-hover) !important;
}

.text-purple-100 {
    color: var(--color-accent) !important;
}

.text-red-700 {
    color: var(--color-error) !important;
}

.text-green-700 {
    color: var(--color-success) !important;
}

.text-yellow-700 {
    color: var(--color-warning) !important;
}

/* Border colors */
.border-gray-300 {
    border-color: var(--color-border) !important;
}

/* Bordas de botões CTA - Cores roxas */
.border-purple-500 {
    border-color: var(--color-accent) !important;
}

.border-purple-400 {
    border-color: var(--color-accent) !important;
}

/* Bordas de status */
.border-red-400 {
    border-color: var(--color-error) !important;
}

.border-green-400 {
    border-color: var(--color-success) !important;
}

.border-yellow-400 {
    border-color: var(--color-warning) !important;
}

/* Focus rings - Cores roxas para CTA */
.focus\:ring-purple-500:focus {
    --tw-ring-color: var(--color-accent) !important;
}

.focus\:ring-purple-600:focus {
    --tw-ring-color: var(--color-accent) !important;
}

/* Shadow colors */
.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

.shadow-md {
    box-shadow: var(--shadow-md) !important;
}

/* Transições */
.transition {
    transition: all var(--transition-normal) ease-in-out !important;
}

/* Border radius */
.rounded-xl {
    border-radius: var(--radius-xl) !important;
}

.rounded-lg {
    border-radius: var(--radius-lg) !important;
}

.rounded {
    border-radius: var(--radius) !important;
}

/* Landing / utilitários extra */
.text-main {
    color: var(--text-main) !important;
}

.text-on-dark-muted {
    color: color-mix(in srgb, var(--text-main) 82%, transparent) !important;
}

/* Fundos e bordas neutros */
.bg-gray-50 {
    background-color: var(--color-gray-50) !important;
}

.border-gray-200 {
    border-color: var(--color-gray-200) !important;
}

.border-gray-100 {
    border-color: var(--color-gray-100) !important;
}

.border-purple-800 {
    border-color: var(--primary-gradient) !important;
}

/* Sidebar: texto secundário sobre fundo escuro (paleta roxo / off-white) */
.text-purple-200 {
    color: color-mix(in srgb, var(--text-main) 70%, var(--primary-action) 30%) !important;
}

.text-purple-300 {
    color: color-mix(in srgb, var(--text-main) 55%, var(--primary-action) 45%) !important;
}

.text-purple-500 {
    color: var(--primary-action-hover) !important;
}

.text-purple-700 {
    color: var(--color-primary-medium) !important;
}

.bg-purple-900 {
    background-color: var(--bg-deep-black) !important;
}

.bg-red-500 {
    background-color: var(--color-error) !important;
}

.bg-yellow-500 {
    background-color: var(--color-warning) !important;
}

.text-green-600,
.text-green-500 {
    color: var(--color-success) !important;
}

.text-yellow-600,
.text-yellow-400 {
    color: var(--color-warning) !important;
}

.text-orange-600 {
    color: var(--color-warning) !important;
}

.border-green-500 {
    border-color: var(--color-success) !important;
}

.hover\:border-green-500:hover {
    border-color: var(--color-success) !important;
}

.hover\:bg-green-50:hover {
    background-color: color-mix(in srgb, var(--color-success) 14%, transparent) !important;
}

.hover\:border-orange-500:hover {
    border-color: var(--color-warning) !important;
}

.hover\:bg-orange-50:hover {
    background-color: color-mix(in srgb, var(--color-warning) 14%, transparent) !important;
}

.hover\:text-green-600:hover {
    color: var(--color-success) !important;
}

.hover\:text-orange-600:hover {
    color: var(--color-warning) !important;
}

.group:hover .group-hover\:text-green-600 {
    color: var(--color-success) !important;
}

.group:hover .group-hover\:text-orange-600 {
    color: var(--color-warning) !important;
}

.group:hover .group-hover\:text-purple-600 {
    color: var(--color-accent) !important;
}

.group:hover .group-hover\:text-accent {
    color: var(--color-accent) !important;
}

.text-gray-500 {
    color: var(--color-gray-500) !important;
}

.text-gray-400 {
    color: var(--color-gray-400) !important;
}

.text-gray-300 {
    color: var(--color-gray-300) !important;
}

.hover\:text-gray-700:hover {
    color: var(--color-gray-700) !important;
}

.hover\:bg-gray-50:hover {
    background-color: var(--color-gray-50) !important;
}

/* Modal overlay */
.bg-black {
    background-color: var(--color-black) !important;
}

/* CTA lateral: gradiente institucional (substitui verde Tailwind) */
.nav-cta-gradient {
    background-image: linear-gradient(to right, var(--primary-action), var(--primary-gradient)) !important;
}

.nav-cta-gradient:hover {
    background-image: linear-gradient(to right, var(--primary-action-hover), var(--primary-gradient-hover)) !important;
}

.focus\:border-purple-500:focus {
    border-color: var(--color-accent) !important;
}

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-2xl {
    box-shadow: var(--shadow-xl) !important;
}