/* base.css — como os elementos do HTML se comportam antes de qualquer
   componente. Reset enxuto, tipografia, links, foco e um punhado de
   utilitários. Carrega depois de tokens.css e antes de todo o resto.

   Aqui só entra o que vale para o documento inteiro. Regra que descreve uma
   peça da interface pertence a components.css. */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;   /* o iOS não aumenta a fonte ao deitar o aparelho */
  scroll-behavior: smooth;
  /* Sem isto, toda âncora do menu pararia atrás do cabeçalho fixo */
  scroll-padding-top: calc(var(--fp-header-h) + var(--fp-space-md));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100svh;
  background: var(--fp-surface);
  color: var(--fp-text);
  font-family: var(--fp-font-sans);
  font-size: var(--fp-text-base);
  font-weight: var(--fp-weight-regular);
  line-height: var(--fp-leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Rede de segurança contra rolagem lateral. Não substitui conferir a
     largura de cada seção: aqui só esconde o vazamento, não o conserta. */
  overflow-x: hidden;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

/* URLs e termos jurídicos longos quebram em vez de estourar a caixa */
p, li, h1, h2, h3, h4, dd, dt { overflow-wrap: break-word; }

/* ---------- Tipografia ---------- */
h1, h2, h3, h4 {
  font-family: var(--fp-font-display);
  font-weight: var(--fp-weight-display);
  line-height: var(--fp-leading-tight);
  letter-spacing: var(--fp-tracking-tight);
  text-wrap: balance;              /* nenhum título termina com uma palavra sozinha */
  color: var(--fp-text);
}

/* Títulos menores levam menos negativo. O aperto que dá elegância a um h1
   atrapalha a leitura quando o corpo já é pequeno. */
h3 { letter-spacing: -0.02em; }
h4 { letter-spacing: -0.01em; }

h1 { font-size: var(--fp-text-5xl); }
h2 { font-size: var(--fp-text-4xl); }
h3 { font-size: var(--fp-text-2xl); }
h4 { font-size: var(--fp-text-xl); }

p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
  text-underline-offset: 0.2em;
  transition: color var(--fp-duration-fast) var(--fp-ease-out),
              text-decoration-color var(--fp-duration-fast) var(--fp-ease-out);
}

a:hover { text-decoration-color: currentColor; }

strong, b { font-weight: var(--fp-weight-semibold); }

ul, ol { padding-inline-start: 1.25em; }

/* ---------- Foco ----------
   Nunca removido. `:focus-visible` já resolve o motivo pelo qual as pessoas
   costumam removê-lo: o anel aparece para quem navega por teclado e não
   aparece no clique de mouse. */
:focus-visible {
  outline: 2px solid var(--fp-focus);
  outline-offset: 3px;
  border-radius: var(--fp-radius-sm);
}

/* Sobre o navy o dourado escuro quase desaparece; ali entra o claro */
.fp-on-dark :focus-visible { outline-color: var(--fp-accent-on-dark); }

/* ---------- Seleção ---------- */
::selection {
  background: color-mix(in oklab, var(--fp-gold) 40%, transparent);
  color: var(--fp-ink);
}

/* ---------- Utilitários ---------- */

/* Visível só para leitor de tela. Não usa `display: none` nem
   `visibility: hidden` de propósito: os dois escondem o texto também do
   leitor, que é justamente quem precisa dele. */
.fp-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* O atalho para pular o menu. Fica fora da tela até receber foco, e é o
   primeiro elemento focável de toda página — quem usa teclado não deveria
   ter de passar por doze links de navegação em cada visita. */
.fp-skip-link {
  position: absolute;
  top: var(--fp-space-2xs);
  left: var(--fp-space-2xs);
  z-index: var(--fp-z-skiplink);
  padding: var(--fp-space-2xs) var(--fp-space-sm);
  background: var(--fp-surface-inverse);
  color: var(--fp-text-inverse);
  border-radius: var(--fp-radius);
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-medium);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--fp-duration) var(--fp-ease-out);
}

.fp-skip-link:focus-visible { transform: translateY(0); }

/* O rótulo em caixa alta com filete dourado que abre cada seção */
.fp-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--fp-space-2xs);
  font-size: var(--fp-text-xs);
  font-weight: var(--fp-weight-extrabold);
  letter-spacing: var(--fp-tracking-widest);
  text-transform: uppercase;
  color: var(--fp-accent-text);
}

.fp-eyebrow::before {
  content: "";
  width: 2rem;
  height: var(--fp-hairline);
  background: var(--fp-gradient-gold);
  flex: none;
}

.fp-on-dark .fp-eyebrow { color: var(--fp-accent-on-dark); }

.fp-measure { max-width: var(--fp-measure); }

/* Marca um trecho como estando sobre fundo escuro. Em vez de repintar cada
   elemento, redefine os tokens de texto e borda ali dentro — assim qualquer
   componente colocado nesse bloco se adapta sem regra própria. */
.fp-on-dark {
  color: var(--fp-text-inverse);
  --fp-text: var(--fp-on-navy);
  --fp-text-muted: var(--fp-on-navy-muted);
  --fp-border: var(--fp-border-inverse);
}

.fp-on-dark h1,
.fp-on-dark h2,
.fp-on-dark h3,
.fp-on-dark h4 { color: var(--fp-text-inverse); }

.fp-text-muted { color: var(--fp-text-muted); }

/* O parágrafo de apoio logo abaixo de um título de seção */
.fp-lead {
  font-size: var(--fp-text-lg);
  color: var(--fp-text-muted);
  max-width: var(--fp-measure);
}