/**
 * Alternância claro / escuro entre seções
 * Padrão: conteúdo claro · hero, CTAs e faixas de destaque escuras; stats em fundo branco na home
 */

/* ── Zonas escuras (tipografia clara) ── */
:is(
    .cc-section-dark,
    .bg-surface-dark,
    .bg-gray-900,
    .bg-black,
    footer,
    .home-hero,
    .home-modes-section,
    .home-clients,
    .home-cta-final,
    .page-hero-v2,
    .cadu-planos-strip,
    .cadu-cta-band,
    .precos-hero,
    .solucoes-hero-bg,
    .servicos-hero,
    .vertical-hero
) {
    color: var(--c300);
}

:is(
    .cc-section-dark,
    .bg-surface-dark,
    .bg-gray-900,
    .bg-black,
    footer,
    .home-hero,
    .home-modes-section,
    .home-clients,
    .home-cta-final,
    .page-hero-v2,
    .cadu-planos-strip,
    .cadu-cta-band,
    .precos-hero,
    .solucoes-hero-bg,
    .servicos-hero,
    .vertical-hero
) :is(h1, h2, h3, h4, h5, h6) {
    color: var(--branco);
}

:is(
    .bg-surface-dark,
    .bg-gray-900,
    .bg-black,
    .cc-section-dark,
    .cadu-planos-strip,
    .cadu-cta-band
) :is(input:not([type='hidden']):not([type='checkbox']):not([type='radio']), textarea, select) {
    background-color: var(--dark-3);
    border-color: var(--borda);
    color: var(--branco);
}

/* ── Superfícies claras (Tailwind) ── */
.bg-white {
    background-color: var(--light-0) !important;
}

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

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

.bg-gray-100 {
    background-color: var(--light-2) !important;
}

.border-gray-100,
.border-gray-200 {
    border-color: var(--border-on-light) !important;
}

.bg-white :is(h1, h2, h3, h4, h5, h6),
.bg-surface :is(h1, h2, h3, h4, h5, h6),
.cc-section-light :is(h1, h2, h3, h4, h5, h6) {
    color: var(--text-on-light);
}

.bg-white :is(p, .lead, .subtitle),
.bg-surface :is(p, .lead, .subtitle),
.cc-section-light :is(p, .lead, .subtitle) {
    color: var(--text-on-light-secondary);
}

:is(.bg-white, .bg-surface, .cc-section-light, .cc-section-light--white, .cc-section-light--muted)
:is(.cc-eyebrow, .label-eyebrow, .brand-eyebrow, .ts-lbl) {
    color: var(--verde-on-light);
}

.bg-white .text-gray-500,
.bg-surface .text-gray-500,
.bg-white .text-gray-600,
.bg-surface .text-gray-600 {
    color: var(--text-on-light-muted) !important;
}