/* ==========================================================================
   Tokens da marca Dífer
   Derivados de ~/.claude/skills/difer-marca/references/identidade-visual.md
   Não inventar valor novo aqui. Cor fora desta lista é erro.
   ========================================================================== */

/* ---------- Fontes self-hosted (sem CDN de terceiro) ---------- */

@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost.woff2') format('woff2-variations');
  font-weight: 300 500;      /* arquivo variável: cobre a faixa inteira */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Paleta — as seis cores da marca, nada além ---------- */
  --verde-escuro: #0D5C2F;
  --verde-medio:  #049548;
  --verde-claro:  #5DBB5A;
  --preto:        #040404;
  --chumbo:       #3F3D3E;
  --off-white:    #F0EAEE;

  /* Derivadas por transparência/mistura — permitido, não é cor nova */
  --verde-escuro-90: rgba(13, 92, 47, 0.90);
  --preto-60:        rgba(4, 4, 4, 0.60);
  --preto-30:        rgba(4, 4, 4, 0.30);
  --off-white-70:    rgba(240, 234, 238, 0.70);
  --linha:           rgba(63, 61, 62, 0.16);

  /* Verde médio escurecido — usado SÓ onde verde sobre off-white precisa
     passar em contraste AA para texto pequeno. O #049548 puro atinge apenas
     3,3:1 sobre --off-white, abaixo dos 4,5:1 exigidos. */
  --verde-texto: #047136;

  /* ---------- Tipografia ---------- */
  --fonte-titulo: 'Poppins', system-ui, sans-serif;
  --fonte-texto:  'Jost', 'Century Gothic', system-ui, sans-serif;

  /* Escala fluida: encosta no mínimo em 360px e no máximo em 1440px */
  --t-chapeu:    clamp(0.69rem, 0.64rem + 0.22vw, 0.81rem);
  --t-corpo:     clamp(1rem,    0.96rem + 0.20vw, 1.13rem);
  --t-corpo-g:   clamp(1.13rem, 1.05rem + 0.35vw, 1.31rem);
  --t-h3:        clamp(1.25rem, 1.13rem + 0.55vw, 1.56rem);
  --t-h2:        clamp(1.75rem, 1.40rem + 1.55vw, 3.00rem);
  --t-h1:        clamp(2.25rem, 1.60rem + 2.90vw, 4.50rem);
  --t-numeral:   clamp(2.50rem, 1.90rem + 2.70vw, 4.50rem);

  /* Assinatura tipográfica da marca: chapéu em caixa alta bem espaçada */
  --entreletra-chapeu: 0.24em;
  --entreletra-titulo: -0.02em;

  /* ---------- Espaçamento ---------- */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;
  --e-9: 6rem;     --e-10: 8rem;

  --secao-y: clamp(3.5rem, 2.2rem + 5.5vw, 7rem);   /* respiro vertical de seção */
  --borda-x: clamp(1.25rem, 0.5rem + 3vw, 4rem);    /* margem lateral da página */
  --largura-max: 1280px;
  --largura-texto: 62ch;

  /* ---------- Outros ---------- */
  --raio: 2px;             /* a marca é angular: canto quase reto, nunca pílula */
  --sombra: 0 1px 2px rgba(4, 4, 4, 0.06), 0 8px 24px rgba(4, 4, 4, 0.08);
  --sombra-alta: 0 4px 12px rgba(4, 4, 4, 0.12), 0 24px 64px rgba(4, 4, 4, 0.20);
  --transicao: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --nav-altura: 4.5rem;
}

/* O site é claro por definição de marca: off-white é o fundo padrão do manual.
   Respeitamos prefers-color-scheme apenas no que o sistema controla (barra de
   rolagem, campos), sem inverter a identidade. */
:root { color-scheme: light; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}