/* ==========================================================================
   Casa Brasa — MG Web
   Tokens da marca: paleta e tipografia.

   Este arquivo é a fonte única das duas páginas do projeto — o site
   (index.html) e o manual de identidade (marca/index.html). Se uma cor
   mudar aqui, muda nos dois. Layout não entra neste arquivo.

   Todos os pares de contraste anotados abaixo foram medidos (WCAG 2.1,
   luminância relativa). Os que reprovam estão anotados junto com a
   variante que resolve — é por isso que existem --brasa-clr, --brasa-esc
   e --cinza-ink em vez de uma cor só por papel.
   ========================================================================== */

:root{

  /* ---------- superfícies ---------- */
  --carvao:#141210;      /* fundo escuro. Não é preto puro: puxa para o marrom
                            para conversar com a brasa e com o pão. */
  --carvao-2:#1D1A17;    /* segunda superfície escura (cartão sobre carvão) */
  --creme:#F1EBE1;       /* fundo claro */
  --creme-2:#E5DCCD;     /* superfície clara secundária */

  /* ---------- cor de marca ---------- */
  --brasa:#C8441C;       /* a cor da marca. Área grande, chapéu de seção,
                            fundo de botão, texto grande.
                            Sobre carvão .... 3.80:1 → só ≥24px ou ≥18.66px bold
                            Sobre creme .... 4.12:1 → só ≥24px ou ≥18.66px bold
                            Para texto pequeno use as duas variantes abaixo. */
  --brasa-clr:#E46A3C;   /* a brasa legível em texto pequeno SOBRE ESCURO
                            Sobre carvão .... 5.68:1  AA */
  --brasa-esc:#9B3313;   /* a brasa legível em texto pequeno SOBRE CLARO
                            Sobre creme ..... 6.16:1  AA */

  /* ---------- texto ---------- */
  --cinza:#8C857B;       /* secundário sobre escuro — 5.09:1 sobre carvão  AA */
  --cinza-ink:#665F55;   /* secundário sobre claro
                            Sobre creme ..... 5.35:1  AA
                            Sobre creme-2 ... 4.67:1  AA
                            (o #6B6459 testado antes dava 4.33:1 sobre
                             creme-2 e reprovava — daí o tom mais fechado) */
  --branco:#FFFFFF;      /* texto sobre brasa. Sobre --brasa dá 4.88:1 (AA).
                            Creme sobre brasa dá 4.12:1 e REPROVA: botão de
                            brasa leva branco puro, nunca creme. */

  /* ---------- fios ---------- */
  --fio-claro:rgba(20,18,16,.14);
  --fio-escuro:rgba(241,235,225,.16);

  /* ---------- tipografia ----------
     Uma família só, Archivo variável, usada nos dois extremos do eixo de
     largura: display condensado e pesado (cartaz de chapa), texto em
     largura normal. Os outros projetos da casa pareiam serifa + sans;
     aqui a tensão vem da largura, não do contraste de famílias. */
  --fonte:"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --wd-display:78;       /* eixo wdth do display  (condensado) */
  --wd-texto:100;        /* eixo wdth do texto    (normal) */

  --fs-mega:clamp(58px,10.5vw,168px);   /* capa do manual, hero do site */
  --fs-h1:clamp(38px,5.6vw,88px);
  --fs-h2:clamp(28px,3.4vw,52px);       /* rótulo de capítulo / seção */
  --fs-h3:clamp(21px,1.9vw,28px);
  --fs-lead:clamp(16.5px,.6vw + 14px,19px);
  --fs-body:16px;
  --fs-ui:15px;
  --fs-meta:12.5px;
  --fs-rotulo:11.5px;                   /* eyebrow / número de capítulo */

  /* ---------- ritmo ----------
     --sect é a distância TOTAL entre dois blocos numa troca de fundo: cada
     seção vizinha entra com --sect-side (metade). Mesma convenção do
     Lucas Barber; sem ela os paddings se somam. */
  --sp-title:clamp(18px,2vw,30px);
  --sp-block:clamp(44px,5vw,72px);
  --sect:clamp(92px,8.6vw,140px);
  --sect-side:calc(var(--sect) / 2);
  --sect-in:clamp(68px,6.6vw,100px);

  --pad:clamp(20px,5.2vw,84px);
  --max:1480px;
  --measure:46ch;

  --e:cubic-bezier(.22,.61,.36,1);
  --e-img:cubic-bezier(.33,.02,.16,1);
}