/* =====================================================
   Focofy Factory — Section Variants (v3.1)
   - Aplicado no <section> externo do renderer
   - Seções NÃO devem setar background manualmente
   - Usa apenas tokens semânticos (Camada 2)
===================================================== */

.section,
.focofy-section {
  background: transparent;
  color: var(--color-text);
}

/* Base: garante que componentes herdem corretamente */
.section :where(a) {
  color: inherit;
}

/* ─────────────────────────────────────────────────────
   LIGHT
   ───────────────────────────────────────────────────── */
.section[data-bg="light"],
.focofy-section[data-bg="light"] {
  background: var(--color-surface-1);
  color: var(--color-text);
}

/* ─────────────────────────────────────────────────────
   DARK (por seção)
   ───────────────────────────────────────────────────── */
.section[data-bg="dark"],
.focofy-section[data-bg="dark"] {
  background: var(--color-surface-dark);
  color: var(--color-text-inverse);
}

/* Ajustes de contraste no dark (sem mexer em cores hardcoded) */
.section[data-bg="dark"] :where(.muted, .text-muted),
.focofy-section[data-bg="dark"] :where(.muted, .text-muted) {
  color: var(--color-text-muted);
  opacity: 0.9;
}

.section[data-bg="dark"] :where(a),
.focofy-section[data-bg="dark"] :where(a) {
  color: var(--color-text-inverse);
}

/* Bordas e cards no dark: usa surfaces e borders semânticos */
.section[data-bg="dark"] :where(.card, .focofy-card),
.focofy-section[data-bg="dark"] :where(.card, .focofy-card) {
  background: var(--color-surface-3);
  border-color: var(--color-border-subtle);
}

/* ─────────────────────────────────────────────────────
   ACCENT (glow leve)
   ───────────────────────────────────────────────────── */
.section[data-bg="accent"],
.focofy-section[data-bg="accent"] {
  background: var(--gradient-section-accent);
  color: var(--color-text);
}

/* ─────────────────────────────────────────────────────
   GRADIENT (hero / destaque)
   ───────────────────────────────────────────────────── */
.section[data-bg="gradient"],
.focofy-section[data-bg="gradient"] {
  background: var(--gradient-hero);
  color: var(--color-text);
}

/* Em gradiente, alguns elementos precisam de contraste sutil */
.section[data-bg="gradient"] :where(.card, .focofy-card),
.focofy-section[data-bg="gradient"] :where(.card, .focofy-card) {
  background: color-mix(in srgb, white 75%, transparent);
  border-color: var(--color-border-subtle);
  backdrop-filter: blur(10px);
}

/* ─────────────────────────────────────────────────────
   SPACING variants (opcional, se o renderer imprime data-spacing)
   ───────────────────────────────────────────────────── */
.section[data-spacing="compact"],
.focofy-section[data-spacing="compact"] {
  padding-block: var(--space-8);
}

.section[data-spacing="default"],
.focofy-section[data-spacing="default"] {
  padding-block: var(--section-padding-y, var(--space-12));
}

.section[data-spacing="spacious"],
.focofy-section[data-spacing="spacious"] {
  padding-block: var(--space-16);
}

/* ─────────────────────────────────────────────────────
   CONTAINER variants (opcional, se o renderer imprime data-container)
   O renderer normalmente coloca um .focofy-container dentro do section.
   ───────────────────────────────────────────────────── */
.focofy-section .focofy-container,
.section .focofy-container {
  width: 100%;
  margin-inline: auto;
  max-width: var(--container-max);
  padding-inline: var(--pad-x);
}

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

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

/* =====================================================
   Nota v3.1:
   Se você quiser "dark premium", use:
   - data-bg="dark"
   - cards e inputs já herdam surfaces/borders acima
===================================================== */