/* =============================================
   theme.css — Sistema de temas Poupaí
   Dark (padrão) + Light (inspirado no app)
   ============================================= */

/* ===== TEMA DARK (padrão) ===== */
:root,
[data-theme="dark"] {
  /* Backgrounds */
  --bg-page:        #0A0A12;
  --bg-navbar:      rgba(10, 10, 18, 0.75);
  --bg-card:        rgba(255, 255, 255, 0.06);
  --bg-input:       rgba(255, 255, 255, 0.05);
  --bg-input-affix: rgba(255, 255, 255, 0.03);
  --bg-hover:       rgba(255, 255, 255, 0.08);
  --bg-active:      rgba(108, 58, 255, 0.2);
  --bg-toggle:      rgba(255, 255, 255, 0.05);

  /* Textos */
  --text-primary:   #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-muted:     rgba(255, 255, 255, 0.35);
  --text-hint:      rgba(255, 255, 255, 0.3);
  --text-placeholder: rgba(255, 255, 255, 0.2);

  /* Bordas */
  --border:         rgba(255, 255, 255, 0.1);
  --border-hover:   rgba(255, 255, 255, 0.25);
  --border-focus:   #6C3AFF;
  --border-active:  rgba(108, 58, 255, 0.5);

  /* Cores principais (accent) */
  --c1: #6C3AFF;
  --c2: #00D2C8;
  --c3: #FF5E8F;
  --c4: #FFB347;
  --c5: #3AFFA3;

  /* Gradientes de texto */
  --grad-logo:    linear-gradient(135deg, #fff, var(--c2));
  --grad-hero:    linear-gradient(135deg, #fff 0%, var(--c2) 50%, var(--c1) 100%);
  --grad-btn:     linear-gradient(135deg, var(--c1), var(--c2));
  --grad-cta:     linear-gradient(135deg, #fff 0%, var(--c2) 50%, var(--c1) 100%);
  --grad-stats1:  linear-gradient(135deg, var(--c4), var(--c3));
  --grad-stats2:  linear-gradient(135deg, var(--c2), var(--c5));

  /* Blobs hero */
  --blob-opacity: 0.35;

  /* Navbar */
  --navbar-border: rgba(255, 255, 255, 0.1);
  --navbar-link:   rgba(255, 255, 255, 0.6);

  /* Sombras */
  --shadow-btn:      0 0 30px rgba(108, 58, 255, 0.4);
  --shadow-btn-hover:0 8px 40px rgba(108, 58, 255, 0.6);

  /* Tabelas */
  --thead-bg:     rgba(20, 20, 32, 0.98);
  --row-hover:    rgba(255, 255, 255, 0.03);
  --row-border:   rgba(255, 255, 255, 0.04);

  /* Diagnóstico */
  --diag-pos-bg:    rgba(58, 255, 163, 0.08);
  --diag-pos-border:rgba(58, 255, 163, 0.25);
  --diag-pos-text:  var(--c5);
  --diag-warn-bg:   rgba(255, 179, 71, 0.08);
  --diag-warn-border:rgba(255, 179, 71, 0.25);
  --diag-warn-text: var(--c4);
  --diag-neg-bg:    rgba(255, 94, 143, 0.08);
  --diag-neg-border:rgba(255, 94, 143, 0.25);
  --diag-neg-text:  var(--c3);

  /* Chart */
  --chart-grid:   rgba(255, 255, 255, 0.04);
  --chart-tick:   rgba(255, 255, 255, 0.35);
  --chart-border: rgba(255, 255, 255, 0.08);
  --tooltip-bg:   rgba(10, 10, 18, 0.95);
}

/* ===== TEMA LIGHT ===== */
[data-theme="light"] {
  /* Backgrounds — branco limpo com tons de roxo suave */
  --bg-page:        #F4F3FF;
  --bg-navbar:      rgba(255, 255, 255, 0.85);
  --bg-card:        #ffffff;
  --bg-input:       #ffffff;
  --bg-input-affix: #F4F3FF;
  --bg-hover:       rgba(108, 58, 255, 0.06);
  --bg-active:      rgba(108, 58, 255, 0.1);
  --bg-toggle:      rgba(108, 58, 255, 0.08);

  /* Textos */
  --text-primary:   #1A1035;
  --text-secondary: #4A3F6B;
  --text-muted:     #7B6FA0;
  --text-hint:      #9E94BF;
  --text-placeholder: #C4BBDC;

  /* Bordas */
  --border:         rgba(108, 58, 255, 0.15);
  --border-hover:   rgba(108, 58, 255, 0.4);
  --border-focus:   #6C3AFF;
  --border-active:  rgba(108, 58, 255, 0.6);

  /* Cores principais — mais saturadas no light */
  --c1: #6C3AFF;
  --c2: #00A8A0;
  --c3: #E8376A;
  --c4: #D4860A;
  --c5: #00875A;

  /* Gradientes de texto */
  --grad-logo:    linear-gradient(135deg, #6C3AFF, #9B6DFF);
  --grad-hero:    linear-gradient(135deg, #1A1035 0%, #6C3AFF 60%, #9B6DFF 100%);
  --grad-btn:     linear-gradient(135deg, #6C3AFF, #9B6DFF);
  --grad-cta:     linear-gradient(135deg, #1A1035 0%, #6C3AFF 60%, #9B6DFF 100%);
  --grad-stats1:  linear-gradient(135deg, var(--c4), var(--c3));
  --grad-stats2:  linear-gradient(135deg, var(--c2), var(--c5));

  /* Blobs hero */
  --blob-opacity: 0.12;

  /* Navbar */
  --navbar-border: rgba(108, 58, 255, 0.12);
  --navbar-link:   #4A3F6B;

  /* Sombras */
  --shadow-btn:       0 4px 20px rgba(108, 58, 255, 0.3);
  --shadow-btn-hover: 0 8px 32px rgba(108, 58, 255, 0.45);

  /* Tabelas */
  --thead-bg:   rgba(244, 243, 255, 0.98);
  --row-hover:  rgba(108, 58, 255, 0.03);
  --row-border: rgba(108, 58, 255, 0.06);

  /* Diagnóstico */
  --diag-pos-bg:     rgba(0, 135, 90, 0.08);
  --diag-pos-border: rgba(0, 135, 90, 0.3);
  --diag-pos-text:   #00875A;
  --diag-warn-bg:    rgba(212, 134, 10, 0.08);
  --diag-warn-border:rgba(212, 134, 10, 0.3);
  --diag-warn-text:  #D4860A;
  --diag-neg-bg:     rgba(232, 55, 106, 0.08);
  --diag-neg-border: rgba(232, 55, 106, 0.3);
  --diag-neg-text:   #E8376A;

  /* Chart */
  --chart-grid:   rgba(108, 58, 255, 0.06);
  --chart-tick:   #7B6FA0;
  --chart-border: rgba(108, 58, 255, 0.1);
  --tooltip-bg:   rgba(26, 16, 53, 0.95);
}

/* ===== APLICAÇÃO GLOBAL DAS VARIÁVEIS ===== */
body {
  background: var(--bg-page) !important;
  color: var(--text-primary) !important;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Navbar */
.navbar {
  background: var(--bg-navbar) !important;
  border-bottom-color: var(--navbar-border) !important;
}

/* Navbar logo */
.navbar-logo {
  background: none !important;
  -webkit-text-fill-color: unset !important;
}

[data-theme="dark"] .logo-path { fill: #3cdbd3; }



[data-theme="light"] .logo-path { fill: #513174; }

.nav-link {
  color: var(--navbar-link) !important;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-primary) !important;
  background: var(--bg-hover) !important;
}

/* Cards */
.feat-card,
.calc-card,
.blog-card,
.result-card,
.sistema-card,
.apos-form,
.calc-form,
.reserva-form,
.fg-form,
.fi-form,
.inf-form,
.phone-mock,
.floating-card,
.chart-wrap,
.table-wrap,
.comparativo-wrap,
.sugestao-wrap,
.comparativo-indices,
.custo-real,
.quiz-wrap {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* Highlight card */
.result-card.highlight {
  background: var(--bg-active) !important;
  border-color: var(--border-active) !important;
}

/* Textos secundários */
.feat-desc,
.page-desc,
.hero-sub,
.card-label,
.card-sub,
.step-text p,
.stat-lbl,
.result-label,
.quiz-sub,
.form-sub,
.sim-sub,
.input-hint,
.comp-prazo,
.comp-taxa,
.indice-taxa,
.indice-perda,
.sugestao-sub {
  color: var(--text-secondary) !important;
}

/* Inputs */
.input-wrap {
  background: var(--bg-input) !important;
  border-color: var(--border) !important;
}

.input-wrap:focus-within {
  border-color: var(--border-focus) !important;
}

.input-prefix,
.input-suffix {
  background: var(--bg-input-affix) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

.input-wrap input,
.input-wrap input::placeholder {
  color: var(--text-primary) !important;
}

.input-wrap input::placeholder {
  color: var(--text-placeholder) !important;
}

.input-group select,
.input-row select {
  background: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* Botões ghost / limpar */
.btn-ghost,
.btn-limpar,
.btn-voltar,
.back-link {
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

.btn-ghost:hover,
.btn-limpar:hover,
.btn-voltar:hover,
.back-link:hover {
  color: var(--text-primary) !important;
  border-color: var(--border-hover) !important;
}

/* Botões primários */
.btn-primary,
.btn-calcular,
.btn-proximo:not(:disabled),
.nav-cta {
  background: var(--grad-btn) !important;
  box-shadow: var(--shadow-btn) !important;
}

.btn-primary:hover,
.btn-calcular:hover,
.btn-proximo:not(:disabled):hover,
.nav-cta:hover {
  box-shadow: var(--shadow-btn-hover) !important;
}

/* Toggle buttons */
.toggle-btn.active,
.tipo-btn.active,
.modo-btn.active,
.quiz-option.selected {
  background: var(--bg-active) !important;
  border-color: var(--border-active) !important;
}

.chart-toggle,
.tabelas-toggle {
  background: var(--bg-toggle) !important;
  border-color: var(--border) !important;
}

/* Diagnósticos */
.diagnostico.positivo {
  background: var(--diag-pos-bg) !important;
  border-color: var(--diag-pos-border) !important;
  color: var(--diag-pos-text) !important;
}

.diagnostico.atencao {
  background: var(--diag-warn-bg) !important;
  border-color: var(--diag-warn-border) !important;
  color: var(--diag-warn-text) !important;
}

.diagnostico.negativo {
  background: var(--diag-neg-bg) !important;
  border-color: var(--diag-neg-border) !important;
  color: var(--diag-neg-text) !important;
}

/* Tabelas */
thead {
  background: var(--thead-bg) !important;
}

thead th {
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

tbody tr {
  border-color: var(--row-border) !important;
}

tbody tr:hover {
  background: var(--row-hover) !important;
}

tbody td {
  color: var(--text-secondary) !important;
}

/* Seções com blob */
section::before,
section::after {
  opacity: var(--blob-opacity) !important;
}

/* Page sections */
.page-section {
  border-color: var(--border) !important;
}

/* Nav dots */
.dot { background: var(--border) !important; }
.dot.active { background: var(--c1) !important; }

/* Scroll cue */
.scroll-cue { color: var(--text-muted) !important; }

/* Blobs light mode — cor roxa */
[data-theme="light"] #s1::before,
[data-theme="light"] #s2::before,
[data-theme="light"] #s3::before,
[data-theme="light"] #s4::before,
[data-theme="light"] #s5::before { background: #6C3AFF; }

[data-theme="light"] #s1::after,
[data-theme="light"] #s2::after,
[data-theme="light"] #s3::after,
[data-theme="light"] #s4::after,
[data-theme="light"] #s5::after  { background: #9B6DFF; }

/* Floating card no light */
[data-theme="light"] .floating-card {
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 8px 32px rgba(108, 58, 255, 0.15);
}

/* Sistema header no financiamento */
[data-theme="light"] .sistema-header.sac   { background: rgba(108, 58, 255, 0.1) !important; }
[data-theme="light"] .sistema-header.price { background: rgba(0, 168, 160, 0.08) !important; }

/* Transição suave em tudo — exceto elementos com gradiente de texto */
*,
*::before,
*::after {
  transition: background-color 0.3s ease,
  border-color 0.3s ease,
  color 0.3s ease,
  box-shadow 0.3s ease;
}