/* ==========================================================================
   SECTIONS BACKGROUND LAYER — sections-bg.css
   Focofy Factory v3.1 — Core Layer

   Responsabilidade: conectar o atributo [data-bg] gerado pelo renderer
   aos tokens do Design Token Generator.

   Sem esta camada, section_bg_variant não tem efeito visual.

   Carregamento: deve ser enfileirado APÓS tokens.css e ANTES dos arquivos
   de seção individuais (sec-faq.css, sec-hero.css, etc.)

   Uso: o renderer aplica data-bg="X" no <section class="focofy-section">
   com base no campo section_bg_variant lido do ACF.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS DE CONTEXTO
   Cada variante redefine --section-bg, --section-color e --section-surface
   para que seções individuais possam usar estes tokens sem conhecer a variante
   -------------------------------------------------------------------------- */

/* Padrão: sem atributo data-bg (herda fundo do body) */
.focofy-section {
  --section-bg:          var(--color-bg);
  --section-color:       var(--color-text);
  --section-surface:     var(--color-surface-2);
  --section-surface-alt: var(--color-surface-3);
  --section-border:      var(--color-border-subtle);
  --section-muted:       var(--color-text-muted);

  background: var(--section-bg);
  color: var(--section-color);
}

/* --------------------------------------------------------------------------
   2. [data-bg="none"] — Transparente
   -------------------------------------------------------------------------- */

.focofy-section[data-bg="none"] {
  --section-bg: transparent;
  background: transparent;
}

/* --------------------------------------------------------------------------
   3. [data-bg="light"] — Superfície clara (surface-1)
   -------------------------------------------------------------------------- */

.focofy-section[data-bg="light"] {
  --section-bg:          var(--color-surface-1);
  --section-color:       var(--color-text);
  --section-surface:     var(--color-surface-2);
  --section-surface-alt: var(--color-surface-3);
  --section-border:      var(--color-border-subtle);
  --section-muted:       var(--color-text-muted);

  background: var(--color-surface-1);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   4. [data-bg="subtle"] — Superfície levemente acinzentada (surface-2)
   Ideal para seções que precisam de separação visual suave
   -------------------------------------------------------------------------- */

.focofy-section[data-bg="subtle"] {
  --section-bg:          var(--color-surface-2);
  --section-color:       var(--color-text);
  --section-surface:     var(--color-surface-1);
  --section-surface-alt: var(--color-surface-3);
  --section-border:      var(--color-border-subtle);
  --section-muted:       var(--color-text-muted);

  background: var(--color-surface-2);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   5. [data-bg="dark"] — Fundo escuro com gradiente de profundidade
   Usa --gradient-dark gerado pelo tokens-generator (cores primária + escura)
   -------------------------------------------------------------------------- */

.focofy-section[data-bg="dark"] {
  --section-bg:          var(--gradient-dark);
  --section-color:       var(--color-text-inverse);
  --section-surface:     color-mix(in srgb, white 6%, transparent);
  --section-surface-alt: color-mix(in srgb, white 10%, transparent);
  --section-border:      color-mix(in srgb, white 10%, transparent);
  --section-muted:       color-mix(in srgb, white 60%, transparent);

  background: var(--gradient-dark);
  color: var(--color-text-inverse);
}

/* Ajuste de elementos filhos no modo dark */
.focofy-section[data-bg="dark"] h1,
.focofy-section[data-bg="dark"] h2,
.focofy-section[data-bg="dark"] h3,
.focofy-section[data-bg="dark"] h4 {
  color: var(--color-text-inverse);
}

.focofy-section[data-bg="dark"] p,
.focofy-section[data-bg="dark"] li {
  color: color-mix(in srgb, white 85%, transparent);
}

/* --------------------------------------------------------------------------
   6. [data-bg="accent"] — Gradiente accent (primária + secundária suave)
   Usa --gradient-section-accent do gerador — ideal para seções de destaque
   -------------------------------------------------------------------------- */

.focofy-section[data-bg="accent"] {
  --section-bg:          var(--gradient-section-accent);
  --section-color:       var(--color-text);
  --section-surface:     color-mix(in srgb, white 70%, transparent);
  --section-surface-alt: color-mix(in srgb, white 50%, transparent);
  --section-border:      var(--color-border-subtle);
  --section-muted:       var(--color-text-muted);

  background: var(--gradient-section-accent);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   7. [data-bg="gradient"] — Gradiente hero aplicado como seção
   Usa --gradient-hero do gerador — mais dramático, para seções de impacto
   -------------------------------------------------------------------------- */

.focofy-section[data-bg="gradient"] {
  --section-bg:          var(--gradient-hero);
  --section-color:       var(--color-text);
  --section-surface:     var(--color-surface-2);
  --section-surface-alt: var(--color-surface-3);
  --section-border:      var(--color-border-subtle);
  --section-muted:       var(--color-text-muted);

  background: var(--gradient-hero);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   8. [data-bg="primary"] — Fundo na cor primária sólida
   Para seções de CTA ou chamadas de alta conversão
   -------------------------------------------------------------------------- */

.focofy-section[data-bg="primary"] {
  --section-bg:          var(--color-accent);
  --section-color:       var(--color-text-inverse);
  --section-surface:     color-mix(in srgb, white 15%, transparent);
  --section-surface-alt: color-mix(in srgb, white 25%, transparent);
  --section-border:      color-mix(in srgb, white 25%, transparent);
  --section-muted:       color-mix(in srgb, white 75%, transparent);

  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.focofy-section[data-bg="primary"] h1,
.focofy-section[data-bg="primary"] h2,
.focofy-section[data-bg="primary"] h3 {
  color: var(--color-text-inverse);
}

/* --------------------------------------------------------------------------
   9. PADDING PADRÃO DAS SEÇÕES
   O renderer aplica padding via section_spacing, mas este é o fallback global
   -------------------------------------------------------------------------- */

.focofy-section {
  padding-block: var(--section-padding-y);
}

.focofy-section[data-spacing="compact"] {
  padding-block: var(--section-padding-y-sm);
}

.focofy-section[data-spacing="spacious"] {
  padding-block: calc(var(--section-padding-y) * 1.5);
}

/* --------------------------------------------------------------------------
   10. CONTAINER PADRÃO
   -------------------------------------------------------------------------- */

.focofy-section .focofy-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.focofy-section[data-container="narrow"] .focofy-container {
  max-width: var(--container-narrow);
}

.focofy-section[data-container="wide"] .focofy-container {
  max-width: var(--container-wide);
}

/* --------------------------------------------------------------------------
   11. SEPARAÇÃO VISUAL ENTRE SEÇÕES
   Alterna fundo automaticamente para criar ritmo visual sem configuração
   Ativado apenas quando NÃO há data-bg explícito
   -------------------------------------------------------------------------- */

.focofy-section:not([data-bg]) + .focofy-section:not([data-bg]) {
  background: var(--color-surface-2);
}

.focofy-section:not([data-bg]) + .focofy-section:not([data-bg]) + .focofy-section:not([data-bg]) {
  background: var(--color-surface-1);
}

/* --------------------------------------------------------------------------
   12. MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .focofy-section {
    padding-block: var(--section-padding-y-sm);
  }

  .focofy-section .focofy-container {
    padding-inline: var(--space-4);
  }
}