/* ============================================================================
   tokens.css — Micro & Macro
   GERADO a partir do frontmatter de Site/docs/DESIGN.md. NÃO editar à mão:
   a próxima geração sobrescreve. Para mudar um token, edite o DESIGN.md e regenere.
   Contrato de prefixos (Verid): --color-*, --color-*-rgb, --font-*, --space-*,
   --radius-*, --shadow-*, --motion-*, --z-*, --gradient-*.
   ============================================================================ */

:root {
  /* ─────────────────────────── COR (por papel) ─────────────────────────── */
  --color-canvas: #fff8f1;
  --color-canvas-rgb: 255 248 241;
  --color-surface: #ffffff;
  --color-ink: #26231f;
  --color-ink-rgb: 38 35 31;
  --color-ink-muted: #5f5a51;
  --color-brand: #004a82;
  --color-brand-rgb: 0 74 130;
  --color-brand-strong: #003a66;
  --color-accent: #93d400;
  --color-accent-rgb: 147 212 0;
  --color-accent-strong: #7cb400;
  --color-accent-deep: #3a664f;
  --color-on-brand: #fff8f1;
  --color-on-accent: #26231f;
  --color-hairline: #e7ddce;
  --color-scrim-rgb: 0 33 58; /* tinta do overlay sobre foto (hero/cultura) */

  /* Funcionais (feedback de UI) — paleta à parte tokenizada */
  --color-success: #2f7a3f;
  --color-success-strong: #1d5c2c; /* texto de sucesso sobre fundo tingido (AA) */
  --color-danger: #b3261e;
  --color-on-status: #ffffff;
  --color-focus: #004a82;

  /* Acento por produto: default = verde de marca; a PDP sobrescreve --product-accent */
  --product-accent: var(--color-accent);
  --product-on-accent: var(--color-on-accent);

  /* ──────────────────────────── TIPOGRAFIA ─────────────────────────────── */
  --font-display: "Fixture Condensed", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font-text: "PF Square Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --font-size-hero: clamp(2.75rem, 6vw, 5rem);
  --font-size-display: clamp(2rem, 4.5vw, 3.5rem);
  --font-size-h2: clamp(1.5rem, 3vw, 2.25rem);
  --font-size-h3: 1.375rem;
  --font-size-lg: 1.125rem;
  --font-size-body: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.75rem;

  --font-leading-tight: 0.95;
  --font-leading-snug: 1.15;
  --font-leading-normal: 1.6;

  --font-tracking-tight: -0.01em;
  --font-tracking-normal: 0;
  --font-tracking-wide: 0.08em;
  --font-tracking-wider: 0.14em;

  /* ─────────────────────────────── RAIO ────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ──────────────────────────── ESPAÇAMENTO ────────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  /* Respiro de seção em DOIS degraus próprios. Antes havia um só,
     clamp(64px, 8vw, 112px), e 67 das 76 seções do site fugiam dele por
     .section--tight, que caía direto no --space-2xl de 64px. Ou seja: a escala
     tinha um buraco no meio e o único degrau largo era grande demais.
     O defeito medido no navegador: seção larga seguida de compacta abria 176px
     de vão (112 de baixo + 64 de cima) na Home, na Sobre e na Contato, e a Sobre
     somava 432px de canvas vazio em quatro seções.
     Os números abaixo foram escolhidos pelo VÃO, que é a soma dos paddings de
     duas seções vizinhas, não pelo padding isolado. Medido no navegador a
     1600px, seção a seção: larga com compacta fecha em 144px (era 176), compacta
     com compacta em 112px (era 128), larga com larga em 144px depois de a
     /indicadores/ receber `section--tight` na segunda faixa (era 224).
     Os dois outros encontros grandes do site NÃO são resolvidos por estes
     tokens e foram tratados nos componentes: seção→rodapé caiu de 208 para
     120px ao remover o `margin-top` do `.site-footer` (sections.css), e
     segment-hero→seção caiu de 176 para 152px ao remover o `margin-bottom` do
     `.segment-hero`. Dos 152, só 88 são canvas vazio: o resto fica sobre a foto.
     Cada clamp tem piso próprio (56 e 40) porque é o piso que manda no celular,
     onde o vw é pequeno demais para contar. Sem piso próprio no degrau compacto,
     os 64px fixos de antes ficariam MAIORES que os 56px de piso do largo e a
     hierarquia inverteria em tela estreita. Isso vale para os DEGRAUS DE SEÇÃO;
     padding interno de componente (hero, clima-band, rodapé) continua em
     --space-2xl de propósito, porque é densidade de bloco, não ritmo de página.
     O largo bate o teto em 1467px de janela; o compacto, em 1400px. */
  --space-section: clamp(56px, 6vw, 88px);
  --space-section-tight: clamp(40px, 4vw, 56px);

  /* ──────────────────────────────── ÍCONES ─────────────────────────────── */
  --icon-sm: 1em;
  --icon-md: 1.25em;
  --icon-lg: 1.5em;
  --icon-xl: 2.25em;

  /* ─────────────────────────── SOMBRA / ELEVAÇÃO ───────────────────────── */
  --shadow-sm: 0 1px 2px rgb(38 35 31 / 0.06), 0 1px 3px rgb(38 35 31 / 0.08);
  --shadow-md: 0 4px 14px rgb(38 35 31 / 0.10);
  --shadow-lg: 0 14px 36px rgb(38 35 31 / 0.16);

  /* ──────────────────────────────── GRADIENTE ──────────────────────────── */
  --gradient-hero: linear-gradient(180deg, rgb(0 33 58 / 0) 38%, rgb(0 33 58 / 0.74) 100%);

  /* ──────────────────────────────── MOTION ─────────────────────────────── */
  --motion-duration-fast: 150ms;
  --motion-duration-base: 240ms;
  --motion-duration-slow: 400ms;
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ──────────────────────────────── Z-INDEX ────────────────────────────── */
  --z-base: 1;
  --z-header: 100;
  --z-fab: 150;
  --z-overlay: 200;
  --z-drawer: 210;
  --z-toast: 300;
}

/* Acessibilidade (invariante): reduzir movimento zera as durações de motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 0.01ms;
    --motion-duration-base: 0.01ms;
    --motion-duration-slow: 0.01ms;
  }
}