/* ─── Ponto Invest — Public pages light/dark theme ───────────────────────── */
/* Applied via html[data-theme="light"] — higher specificity than :root      */
/* Covers three variable families: --bg/* (landing), --navy/* (quem-somos,   */
/* privacidade, termos), and seo-pages.css vars (blog, calculadoras, etc.)   */

/* ─── Light mode variable overrides ─────────────────────────────────────── */
html[data-theme="light"] {
  /* Backgrounds — landing + seo-pages family */
  --bg:     #f8fafc;
  --bg2:    #ffffff;
  --bg3:    #f1f5f9;
  --surf:   #ffffff;
  --surf2:  #f8fafc;
  /* Backgrounds — quem-somos / privacidade / termos family */
  --navy:   #f8fafc;
  --navy2:  #ffffff;
  --navy3:  #f1f5f9;
  --navy4:  #e2e8f0;
  /* Borders */
  --border:  rgba(0,0,0,0.08);
  --border2: rgba(0,0,0,0.12);
  /* Text */
  --text:   #1e293b;
  --text2:  #475569;
  --text3:  #94a3b8;
  --text4:  #94a3b8;
  /* Accent — slightly darker for contrast on white backgrounds */
  --accent:  #2563eb;
  --accent2: #3b82f6;
  /* Heading/strong text (replaces hardcoded #fff in landing.html classes) */
  --text-strong: #1e293b;
  /* Blue family (quem-somos) */
  --blue:   #2563eb;
  --blue2:  #1d4ed8;
  --blue3:  #1e40af;
  /* Green family */
  --green:  #16a34a;
  --green2: #15803d;
}

/* ─── seo-pages.css hardcoded-white overrides ─────────────────────────── */
html[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}
html[data-theme="light"] .seo-header {
  background: rgba(248,250,252,0.92);
  border-bottom-color: rgba(0,0,0,0.08);
}
html[data-theme="light"] .seo-logo { color: #1e293b; }
html[data-theme="light"] .seo-nav a { color: #475569; }
html[data-theme="light"] .seo-nav a:hover,
html[data-theme="light"] .seo-footer a:hover,
html[data-theme="light"] .seo-breadcrumbs a:hover { color: #1e293b; }
html[data-theme="light"] .seo-breadcrumbs a { color: #475569; }
html[data-theme="light"] .seo-h1 { color: #1e293b; }
html[data-theme="light"] .seo-article h2,
html[data-theme="light"] .seo-article h3 { color: #1e293b; }
html[data-theme="light"] .seo-article p strong,
html[data-theme="light"] .seo-callout-title,
html[data-theme="light"] .seo-faq-item summary,
html[data-theme="light"] .seo-step-title,
html[data-theme="light"] .seo-related-card-title { color: #1e293b; }
html[data-theme="light"] .seo-table th {
  background: #f1f5f9;
  color: #1e293b;
}
html[data-theme="light"] .seo-table tr:hover td { background: rgba(37,99,235,.04); }
html[data-theme="light"] .seo-faq-item summary:hover { background: rgba(37,99,235,.04); }
html[data-theme="light"] .seo-footer { color: #64748b; }

/* ─── Toggle button ──────────────────────────────────────────────────────── */
.theme-toggle-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 9990;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  line-height: 1;
  padding: 0;
}
html[data-theme="light"] .theme-toggle-btn {
  background: rgba(30,41,59,0.06);
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.theme-toggle-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 22px rgba(0,0,0,0.35);
}
html[data-theme="light"] .theme-toggle-btn:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* ─── landing.html structural overrides ───────────────────────────────────── */
/* Text colors are now handled by --text-strong variable above.               */
/* These rules handle backgrounds and borders that don't use variables.        */

/* stat-number gradient: replace #fff start with dark for legibility */
html[data-theme="light"] .stat-number {
  background: linear-gradient(135deg, #1e293b, var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Cards: rgba(white) → rgba(black) so borders/shadows stay visible */
html[data-theme="light"] .feature-card {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.08);
}
html[data-theme="light"] .feature-card:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(37,99,235,0.2);
}
html[data-theme="light"] .pricing-card {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.08);
}
html[data-theme="light"] .pricing-card:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.15);
}
html[data-theme="light"] .testimonial-card {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.08);
}
html[data-theme="light"] .testimonial-card:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.15);
}
html[data-theme="light"] .showcase-item {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
}
html[data-theme="light"] .faq-footer-cta { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
html[data-theme="light"] .faq-toggle { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }

/* FAQ search / filter backgrounds */
html[data-theme="light"] .faq-search {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.12);
}
html[data-theme="light"] .faq-search-clear { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
html[data-theme="light"] .faq-search-clear:hover { background: rgba(0,0,0,0.08); }
html[data-theme="light"] .faq-filter { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
html[data-theme="light"] .faq-filter:hover { border-color: rgba(0,0,0,0.2); background: rgba(0,0,0,0.05); }

/* Ghost button */
html[data-theme="light"] .btn-ghost {
  border-color: rgba(0,0,0,0.15);
  color: var(--text2);
}
html[data-theme="light"] .btn-ghost:hover {
  color: #1e293b;
  border-color: rgba(0,0,0,0.25);
  background: rgba(0,0,0,0.04);
}
/* Header and Navigation in Light Mode — Elegant Glassmorphism */
html[data-theme="light"] header {
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] header.scrolled {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
}

html[data-theme="light"] header nav a {
  color: var(--text2);
}

html[data-theme="light"] header nav a:hover {
  color: var(--text-strong);
}

html[data-theme="light"] header .logo {
  color: var(--text-strong);
}

/* Login button styled specifically for light mode header */
html[data-theme="light"] header .btn-login {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text2);
  border-color: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] header .btn-login:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text-strong);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.02);
}

/* Footer active state */
html[data-theme="light"] .footer-section a:active { color: var(--accent); }
html[data-theme="light"] footer a:active { color: var(--accent); }

/* Landing watermark light mode override */
html[data-theme="light"] .landing-watermark {
  opacity: 0.08;
  mix-blend-mode: multiply;
  filter: contrast(1.1) grayscale(1);
}