/* ═══════════════════════════════════════════════════════════════════
   TEMA CLARO — variáveis e overrides
   Preserva laranja e cinza com tonalidades brancas
   ═══════════════════════════════════════════════════════════════════ */

html[data-theme="light"] {
  --wa-bg: #f5f5f5;
  --wa-surface: #ffffff;
  --wa-surface-2: #f0f0f0;
  --wa-border: #e5e5e5;
  --wa-border-light: #ebebeb;
  --wa-gray-dark: #9e9e9e;
  --wa-gray-mid: #616161;
  --wa-gray-text: #424242;
  --wa-muted: #757575;
  --wa-orange: #f6800a;
  --wa-orange-hover: #ff8f20;
  --wa-orange-dim: #cc6500;
  --wa-orange-glow: rgba(246, 128, 10, 0.12);
  --wa-orange-glow-sm: rgba(246, 128, 10, 0.06);
  --wa-white: #1a1a1a;
  --wa-header-bg: rgba(255, 255, 255, 0.95);
  --wa-overlay-bg: rgba(255, 255, 255, 0.98);
  --wa-badge-bg: rgba(255, 255, 255, 0.9);
}

/* Header scrolled — tema claro */
html[data-theme="light"] .site-header.scrolled {
  background-color: var(--wa-header-bg);
  border-bottom-color: var(--wa-border);
}

/* Menu overlay — tema claro */
@media (max-width: 768px) {
  html[data-theme="light"] .main-nav {
    background: var(--wa-overlay-bg);
  }
}

/* Hero badges/chips — tema claro */
html[data-theme="light"] .hero-image-badge,
html[data-theme="light"] .hero-chip {
  background: var(--wa-badge-bg);
  border-color: var(--wa-border);
}

/* Logo texto — tema claro (inverter para escuro em fundo claro) */
html[data-theme="light"] .logo-text {
  filter: brightness(0);
  opacity: 0.85;
}

/* About bg logo — tema claro */
html[data-theme="light"] .about-bg-logo {
  filter: invert(0);
  opacity: 0.04;
}