/**
 * Base & Reset — v3.2
 *
 * Mudanças v2.4 → v3.2:
 *   - --focofy-dark   → var(--color-bg)       (Camada 2)
 *   - --focofy-text   → var(--color-text)      (Camada 2)
 *   - font-family 'Inter' hardcoded → var(--font-body) / var(--font-heading)
 *   - line-height: var(--lh-normal) → var(--lh-normal)    (v3.2 naming)
 *   - line-height: var(--lh-tight) → var(--lh-tight)  (v3.2 naming)
 *   - h1-h6 com clamp() hardcoded → var(--font-size-*) do generator (escala modular)
 *   - font-weight: 700 hardcoded → var(--fw-heading)
 *   - var(--space-4) em <p> → var(--space-4)  (v3.2 naming)
 *   - Mantidos: scroll-behavior, overflow-x, antialiasing (não são tokens)
 *
 * NOTA: box-sizing, html font-size e body font/color já estão em tokens.css.
 *       Este arquivo trata apenas do que tokens.css não cobre:
 *       reset de margens, scroll, overflow, e classes utilitárias de tipografia.
 *
 * @package FocofyFactory
 * @version 3.2
 */

/* ══════════════════════════════════════════════════════════════════════════
   HTML
   ══════════════════════════════════════════════════════════════════════════ */

html {
  scroll-behavior:          smooth;
  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
}

/* ══════════════════════════════════════════════════════════════════════════
   BODY
   tokens.css já define: font-family, font-size, line-height, color, background.
   Aqui só adicionamos overflow-x e o estado nav-open.
   ══════════════════════════════════════════════════════════════════════════ */

body {
  overflow-x: hidden;
}

body.nav-open {
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESET DE MARGIN / PADDING
   ══════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

ul, ol {
  padding-left: var(--space-6);
}

img, video, svg {
  display:   block;
  max-width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   TIPOGRAFIA — HEADINGS
   tokens.css define h1-h4 e h5-h6 com font-family, weight, line-height e cor.
   Aqui adicionamos letter-spacing e a escala de tamanhos responsiva
   que usa os tokens do generator (escala modular ACF).
   ══════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
}

/* Escala responsiva: tokens do generator garantem os valores base.
   O clamp() abaixo usa os tokens como floor, escalando suavemente com vw. */
h1 { font-size: clamp(var(--font-size-3xl), 5vw,  var(--font-size-5xl)); }
h2 { font-size: clamp(var(--font-size-2xl), 4vw,  var(--font-size-4xl)); }
h3 { font-size: clamp(var(--font-size-xl),  3vw,  var(--font-size-3xl)); }
h4 { font-size: clamp(var(--font-size-lg),  2.5vw, var(--font-size-2xl)); }
h5 { font-size: clamp(var(--font-size-base), 2vw,  var(--font-size-xl)); }
h6 { font-size: var(--font-size-base); }

/* ══════════════════════════════════════════════════════════════════════════
   TIPOGRAFIA — PARÁGRAFO E LINKS
   tokens.css já define p (margin-bottom) e a (color, decoration, transition).
   ══════════════════════════════════════════════════════════════════════════ */

p {
  line-height: var(--lh-normal);
}

/* Links fora de seções focofy herdam cor e não têm decoration */
a {
  color:           inherit;
  text-decoration: none;
  transition:      color var(--transition-fast) ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   LISTAS
   ══════════════════════════════════════════════════════════════════════════ */

.entry-content ul,
.entry-content ol {
  margin-bottom: var(--space-4);
  line-height:   var(--lh-relaxed);
}

.entry-content li { margin-bottom: var(--space-1); }

/* Reset para listas de navegação */
nav ul,
.menu,
.primary-menu {
  list-style: none;
  margin:     0;
  padding:    0;
}

/* ══════════════════════════════════════════════════════════════════════════
   MEDIA
   ══════════════════════════════════════════════════════════════════════════ */

figure {
  margin: 0;
}

figcaption {
  font-size: var(--font-size-sm);
  color:     var(--color-text-muted);
  margin-top: var(--space-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   FORMULÁRIOS BASE
   Semântica pura — estilos visuais em components/forms.css
   ══════════════════════════════════════════════════════════════════════════ */

button { cursor: pointer; }

input, textarea, select, button {
  font-family: inherit;
  font-size:   inherit;
}

/* ══════════════════════════════════════════════════════════════════════════
   CLASSES UTILITÁRIAS DE TIPOGRAFIA DO TEMA
   ══════════════════════════════════════════════════════════════════════════ */

.focofy-title,
.focofy-heading,
.section__title {
  font-family:    var(--font-heading);
  font-weight:    var(--fw-heading);
  color:          var(--color-heading);
  letter-spacing: -0.02em;
}

.focofy-body-text,
.section__description,
.focofy-content p {
  font-family: var(--font-body);
  color:       var(--color-text);
}

.focofy-section__kicker {
  font-size:      var(--font-size-sm);
  font-weight:    var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--color-accent);
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTAINER
   ══════════════════════════════════════════════════════════════════════════ */

.focofy-container {
  width:         100%;
  max-width:     var(--container-max);
  margin-left:   auto;
  margin-right:  auto;
  padding-left:  var(--pad-x, 24px);
  padding-right: var(--pad-x, 24px);
}

/* ══════════════════════════════════════════════════════════════════════════
   SEÇÃO BASE
   ══════════════════════════════════════════════════════════════════════════ */

.focofy-section {
  position: relative;
  width:    100%;
}

.focofy-factory {
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
}

/* ══════════════════════════════════════════════════════════════════════════
   ACESSIBILIDADE
   ══════════════════════════════════════════════════════════════════════════ */

/* Skip link */
.skip-link {
  position:   absolute;
  top:        -100%;
  left:       var(--space-4);
  z-index:    9999;
  padding:    var(--space-3) var(--space-6);
  background: var(--color-accent);
  color:      var(--color-text-inverse);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition:  top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}