@import url('https://fonts.googleapis.com/css2?family=roboto:wght@300;400;500;600;700;800;900&display=swap');

/* ========================================
   TEMA PERSONALIZADO - Gerado Dinamicamente
   ======================================== */

:root {
    /* Cores Principais */
    --color-primary: #6366f1;
    --color-primary-light: #767aff;
    --color-primary-dark: #4f51c0;
    
    --color-secondary: #8b5cf6;
    --color-secondary-light: #a66eff;
    --color-secondary-dark: #6f49c4;
    
    --color-accent: #ec4899;
    --color-text: #1f2937;
    --color-background: #ffffff;
    
    /* Botões para Fundos Claros */
    --btn-light-bg: #6366f1;
    --btn-light-text: #ffffff;
    --btn-light-hover: #ffffff;
    --btn-light-text-hover: #5d35fd;
    --btn-light-font: 'Inter', sans-serif;
    
    /* Botões para Fundos Escuros */
    --btn-dark-bg: #ffffff;
    --btn-dark-text: #1f2937;
    --btn-dark-hover: #d6e4ff;
    --btn-dark-text-hover: #1f2937;
    --btn-dark-font: 'Inter', sans-serif;
    
    /* Fonte */
    --font-family: 'roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Aplicar fonte global */
body {
    font-family: var(--font-family);
    color: var(--color-text);
    background-color: var(--color-background);
}

/* Botões Primários */
.btn-primary,
.bg-indigo-600,
.bg-indigo-700,
.bg-gradient-to-r.from-indigo-600,
button.bg-indigo-600,
a.bg-indigo-600 {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
    border-color: var(--color-primary) !important;
}

.btn-primary:hover,
.bg-indigo-600:hover,
.bg-indigo-700:hover,
.hover\:bg-indigo-700:hover,
button.bg-indigo-600:hover,
a.bg-indigo-600:hover {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-secondary-dark) 100%) !important;
    border-color: var(--color-primary-dark) !important;
}

/* Textos com cor primária */
.text-indigo-600,
.text-indigo-700,
.hover\:text-indigo-600:hover,
.hover\:text-indigo-700:hover {
    color: var(--color-primary) !important;
}

.text-indigo-800,
.text-indigo-900 {
    color: var(--color-primary-dark) !important;
}

/* Bordas */
.border-indigo-200,
.border-indigo-300,
.border-indigo-400,
.border-indigo-500,
.border-indigo-600,
.hover\:border-indigo-600:hover {
    border-color: var(--color-primary) !important;
}

/* Backgrounds */
.bg-indigo-50 {
    background-color: #6366f110 !important;
}

.bg-indigo-100 {
    background-color: #6366f120 !important;
}

.bg-indigo-200 {
    background-color: #6366f130 !important;
}

.bg-indigo-500 {
    background-color: var(--color-primary) !important;
}

/* Links */
a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-primary-dark);
}

/* Gradientes do Hero */
.hero-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

/* Botões de Ação */
.cta-button {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%);
}

.cta-button:hover {
    background: linear-gradient(135deg, #d44089 0%, var(--color-primary-dark) 100%);
}

/* Cards */
.card-hover:hover {
    border-color: var(--color-primary);
    box-shadow: 0 10px 30px #6366f130;
}

/* Inputs em foco */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px #6366f120 !important;
}

/* Badges e Tags */
.badge-primary {
    background-color: var(--color-primary);
    color: white;
}

/* Cabeçalho da Tabela Admin */
.admin-table thead {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

/* Scrollbar personalizada */
::-webkit-scrollbar-thumb {
    background: var(--color-primary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
}

/* Loader/Spinner */
.spinner {
    border-top-color: var(--color-primary);
}

/* Checkbox e Radio customizados */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Progress Bar */
.progress-bar {
    background-color: var(--color-primary);
}

/* Alertas de Sucesso */
.alert-success {
    background-color: #6366f115;
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

/* Títulos */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
    font-weight: 700;
}

/* Menu Ativo */
.nav-link.active,
.menu-item.active {
    background-color: var(--color-primary);
    color: white;
}

/* Footer */
.footer-gradient {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-secondary-dark) 100%);
}

/* Botões Personalizados */
.btn-light-bg {
    background-color: var(--btn-light-bg) !important;
    color: var(--btn-light-text) !important;
    font-family: var(--btn-light-font);
    transition: all 0.3s ease;
}

.btn-light-bg:hover {
    background-color: var(--btn-light-hover) !important;
    color: var(--btn-light-text-hover) !important;
}

.btn-dark-bg {
    background-color: var(--btn-dark-bg) !important;
    color: var(--btn-dark-text) !important;
    font-family: var(--btn-dark-font);
    transition: all 0.3s ease;
}

.btn-dark-bg:hover {
    background-color: var(--btn-dark-hover) !important;
    color: var(--btn-dark-text-hover) !important;
}

/* ========================================
   APLICAÇÃO GLOBAL DE CORES - TODOS OS ELEMENTOS
   ======================================== */

/* Headers e Navegação */
header.bg-gradient-to-r,
nav.bg-gradient-to-r,
.header-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
}

/* Seções com Background Escuro */
section.bg-gray-900,
section.bg-gray-800,
.bg-dark,
.dark-section {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-secondary-dark) 100%) !important;
}

/* Hero Section */
#hero,
.hero,
.hero-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
}

/* Seções com Gradiente */
.bg-gradient-to-r,
.bg-gradient-to-br,
.bg-gradient-to-bl,
.bg-gradient-to-tr,
.bg-gradient-to-tl {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
}

/* Backgrounds Específicos do Tailwind */
.from-indigo-600,
.from-indigo-700,
.from-purple-600,
.from-blue-600 {
    --tw-gradient-from: var(--color-primary) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(99, 102, 241, 0)) !important;
}

.to-indigo-600,
.to-indigo-700,
.to-purple-600,
.to-blue-600 {
    --tw-gradient-to: var(--color-secondary) !important;
}

.via-indigo-600,
.via-purple-600 {
    --tw-gradient-stops: var(--tw-gradient-from), var(--color-primary), var(--tw-gradient-to, rgba(99, 102, 241, 0)) !important;
}

/* CTAs e Botões de Destaque */
.cta,
.btn-cta,
[class*="cta-"],
[class*="btn-action"] {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%) !important;
    color: white !important;
}

.cta:hover,
.btn-cta:hover {
    background: linear-gradient(135deg, #d44089 0%, var(--color-primary-dark) 100%) !important;
}

/* Cards e Containers */
.card-primary,
.container-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
    color: white !important;
}

/* Badges e Pills */
.badge,
.pill,
.tag {
    background-color: var(--color-primary) !important;
    color: white !important;
}

/* Overlays */
.overlay,
.modal-overlay {
    background-color: #6366f190 !important;
}

/* Destaques e Highlights */
.highlight,
.featured,
.emphasis {
    color: var(--color-primary) !important;
}

/* Ícones */
.icon-primary,
i.text-indigo-600,
i.text-purple-600,
i.text-blue-600 {
    color: var(--color-primary) !important;
}

/* Dividers */
hr,
.divider {
    border-color: var(--color-primary) !important;
}

/* Tooltips */
.tooltip {
    background-color: var(--color-primary) !important;
    color: white !important;
}

/* Notificações */
.notification,
.toast {
    border-left: 4px solid var(--color-primary) !important;
}

/* Tabs Ativos */
.tab.active,
.tab-active {
    background-color: var(--color-primary) !important;
    color: white !important;
    border-bottom-color: var(--color-primary) !important;
}

/* Accordion Headers */
.accordion-header {
    background-color: #6366f110 !important;
    border-left: 3px solid var(--color-primary) !important;
}

/* Pricing Cards */
.pricing-card.featured,
.pricing-featured {
    border: 3px solid var(--color-primary) !important;
    box-shadow: 0 10px 40px #6366f130 !important;
}

/* Testimonials */
.testimonial {
    border-left: 4px solid var(--color-primary) !important;
}

/* Stats e Números */
.stat-number,
.counter {
    color: var(--color-primary) !important;
}

/* Timeline */
.timeline-item::before {
    background-color: var(--color-primary) !important;
}

/* Breadcrumbs */
.breadcrumb-item.active {
    color: var(--color-primary) !important;
}

/* Pagination */
.pagination .active,
.page-item.active .page-link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Dropdowns */
.dropdown-item:hover,
.dropdown-item.active {
    background-color: #6366f115 !important;
    color: var(--color-primary) !important;
}

/* Switches e Toggles */
.switch input:checked + .slider {
    background-color: var(--color-primary) !important;
}

/* Range Sliders */
input[type="range"]::-webkit-slider-thumb {
    background-color: var(--color-primary) !important;
}

input[type="range"]::-moz-range-thumb {
    background-color: var(--color-primary) !important;
}

/* Skeleton Loaders */
.skeleton {
    background: linear-gradient(90deg, #6366f110 25%, #6366f120 50%, #6366f110 75%) !important;
}

/* Ribbons e Banners */
.ribbon,
.banner {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%) !important;
    color: white !important;
}

/* Seções Específicas do Site */
#about,
#features,
#testimonials,
#pricing,
#contact {
    /* Manter backgrounds neutros, apenas acentos */
}

/* Aplicar cor primária em elementos inline */
strong.primary,
em.primary,
span.primary {
    color: var(--color-primary) !important;
}

/* Sombras com cor primária */
.shadow-primary {
    box-shadow: 0 10px 30px #6366f130 !important;
}

.shadow-primary-lg {
    box-shadow: 0 20px 60px #6366f140 !important;
}

/* Hover Effects Globais */
[class*="hover-primary"]:hover {
    color: var(--color-primary) !important;
}

[class*="hover-bg-primary"]:hover {
    background-color: var(--color-primary) !important;
    color: white !important;
}

/* Focus Visible */
*:focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
}