/*
  Tokens de design — todo valor visual do site vem daqui (DESIGN.md, Etapa 3).
  Valores marcados "proposto" não estavam no DESIGN.md e foram adicionados na
  Etapa 4 por necessidade técnica (ver aviso no chat) — avisar se quiser outro valor.
*/

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/fraunces-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fraunces-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/fraunces-700.woff2') format('woff2');
}

:root {
  /* cores — DESIGN.md secão 1 */
  --cor-fundo: #FAF6EF;
  --cor-superficie: #FFFDF9;
  --cor-texto-principal: #2B2118;
  --cor-texto-secundario: #6B5B4D;
  --cor-marca: #8B5A32;
  --cor-marca-hover: #6E4526;
  --cor-borda: #E4DACB;
  --cor-foco: #B5651D;

  /* tipografia */
  --fonte-titulo: 'Fraunces', Georgia, serif;
  --fonte-corpo: 'Inter', system-ui, -apple-system, sans-serif;

  --tam-hero: 2rem;
  --tam-h1: 1.5rem;
  --tam-h2: 1.25rem;
  --tam-corpo: 1rem;
  --tam-legenda: 0.875rem;

  /* espaçamento (base 8px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* raio e sombra */
  --raio-pequeno: 4px;
  --raio-medio: 8px;
  --sombra-sutil: 0 1px 2px rgba(43, 33, 24, .06);
  /* proposto na Etapa 4 — sombra mais presente pra fotos/logo em camada,
     não estava no DESIGN.md original */
  --sombra-foto: 0 16px 32px -12px rgba(43, 33, 24, .35);

  /* foco visível (acessibilidade, regra 4 da Etapa 4) */
  --foco-largura: 2px;
  --foco-offset: 2px;

  /* propostos na Etapa 4 — não estavam no DESIGN.md, ver aviso */
  --largura-leitura: 600px;
  --largura-container: 1100px;
  --altura-toque-minima: 44px;

  /* Direção "opção B", aprovada pela cliente depois da Etapa 3 original —
     substitui o fundo creme fixo por um degradê contínuo na paleta da
     logo, clareando conforme desce a página. Fica claro o bastante já na
     primeira metade da rolagem (independente da altura real da página em
     cada tamanho de tela) e permanece claro dali pra baixo — ver nota em
     base.css sobre por que não é um degradê proporcional à página inteira. */
  --degrade-marca: linear-gradient(180deg,
    #8B5A32 0%, #93673D 9%, #A2764A 20%, #C2A176 31%, #D8BD91 42%, #E8D3B0 50%, #E8D3B0 100%);
  --cor-marca-clara: #E8D3B0;
  --cor-texto-sobre-claro: #3D2717;
  --cor-texto-sobre-claro-2: #6E4526;
  --cor-borda-sobre-claro: rgba(61, 39, 23, .18);

  /* Páginas internas (FAQ, Blog) têm comprimento imprevisível — cresce
     conforme a Julia publica mais itens pelo painel. Um degradê em %
     como o da home ficaria errado em páginas curtas ou muito longas.
     Aqui a transição acontece numa faixa fixa em pixels perto do topo
     e depois permanece clara pelo resto, não importa quanto a página
     cresça. */
  --degrade-marca-interna: linear-gradient(180deg,
    #8B5A32 0px, #A2764A 220px, #D8BD91 420px, #E8D3B0 560px, #E8D3B0 100%);
}

/* --ponto-quebra não pode virar variável CSS dentro de @media (limitação da
   linguagem) — 768px replica o mesmo valor proposto acima, mantenha os dois
   sincronizados se decidir mudar o breakpoint. */
@media (min-width: 768px) {
  :root {
    --tam-hero: 2.5rem;
    --tam-h1: 1.875rem;
    --tam-h2: 1.375rem;
  }
}