/* ==========================================================================
   Mattera Lab — tokens
   Fonte da verdade: manual de identidade p.19 + cores medidas nas fotos.
   Nomes por função, não por aparência.
   ========================================================================== */

:root {

  /* --- Paleta bruta da marca (manual p.19) — não usar direto no layout ---- */
  --marca-marrom:    #3e1e12; /* marrom-escuro */
  --marca-oliva:     #4a4a26; /* verde-oliva */
  --marca-cru:       #f6f2e9; /* off-white / cru */
  --marca-mostarda:  #d0b734; /* mostarda */
  --marca-camelo:    #b99366; /* camelo */

  /* --- Cores medidas nas fotos reais ------------------------------------- */
  --foto-ciclorama:  #F7F6F7; /* branco frio do fundo, sessão A */
  --foto-sombra:     #E1DFE1; /* sombra do ciclorama — vira linha divisória */
  --foto-azulejo:    #20305E; /* azul dos azulejos Fragmentos */

  /* --- Papéis (é isto que o layout usa) ----------------------------------- */

  /* Fundo da página no cru do manual: a marca manda no papel, a foto manda dentro da moldura. */
  --cor-fundo:            #ffffff;   /* branco: decisão do dono — mais clean que o cru do manual */
  /* Superfície alternada no branco frio do ciclorama: a foto sessão A funde com o fundo, sem recorte visível. */
  --cor-fundo-alt:        #ffffff;   /* era o branco frio do ciclorama; agora branco puro — a separação das seções vem do fio, não de um tom de fundo */
  /* Fundo escuro (rodapé) no marrom da marca — 13,43:1 com o cru. */
  --cor-fundo-escuro:     #ffffff;   /* o rodapé era um bloco marrom; o dono pediu tudo branco */
  /* Texto no marrom-escuro: 13,43:1 sobre o cru, 13,92:1 sobre o ciclorama. AAA nos dois. */
  --cor-texto:            var(--marca-marrom);
  /* Texto secundário no verde-oliva: 8,18:1 sobre o cru — hierarquia sem cinza inventado fora do manual. */
  --cor-texto-suave:      var(--marca-oliva);
  /* Texto sobre fundo escuro: o próprio cru, 13,43:1 sobre o marrom. */
  --cor-texto-invertido:  var(--marca-marrom);  /* sem fundo escuro, o texto do rodapé volta ao marrom */
  /* Acento no azul do azulejo: único saturado do acervo; 11,42:1 sobre o cru. */
  --cor-acento:           var(--foto-azulejo);
  /* Links no marrom do texto (a distinção é o sublinhado, não a cor) — 13,43:1. */
  --cor-link:             var(--marca-marrom);
  /* Sublinhado do link no camelo: 2,53:1, decorativo — a legibilidade vem da cor do texto. */
  --cor-link-linha:       var(--marca-camelo);
  /* Linha divisória na sombra do ciclorama: separa sem desenhar régua. */
  --cor-linha:            var(--foto-sombra);
  /* Anel de foco no mesmo acento: 11,42:1 sobre o cru, 8,46:1 sobre o greige. */
  --cor-foco:             var(--cor-acento);
  /* Contra-anel de foco no cru, para o foco sobreviver em cima de foto escura. */
  --cor-foco-contra:      #ffffff;
  /* Seleção de texto no mostarda: 7,51:1 com o marrom por cima. */
  --cor-selecao:          var(--marca-mostarda);
  /* Fundo do menu mobile aberto: sólido, nunca translúcido sobre foto (defeito 4 da referência). */
  --cor-menu-fundo:       #ffffff;

  /* --- Tipografia --------------------------------------------------------- */
  /* Barlow Semi Condensed (SIL OFL), self-hosted. O fallback é só de sistema, por licença. */
  --fonte: "Barlow Semi Condensed", "Helvetica Neue", Arial, sans-serif;

  --peso-leve:    300; /* contraste de traço medido em 1,15: em corpo grande pede peso mais leve, não negrito */
  --peso-normal:  400; /* navegação e menu, onde 300 fica fino demais em 14px */
  --peso-medio:   500; /* o mais pesado que usamos: nada de 600/700 sintetizado */

  /* clamp() em vez de vw puro: vw puro ignora o zoom do usuário (WCAG 1.4.4).
     Interpolação medida entre 390px e 1440px de viewport. */
  --fs-nav:      clamp(0.875rem, 0.87rem + 0.04vw, 0.95rem);   /* 14px → 14,4px (1vw da referência) */
  --fs-corpo:    clamp(1rem,     0.97rem + 0.12vw, 1.125rem);  /* 16px → 17,28px (1,2vw da referência) */
  --fs-h2:       clamp(1.25rem,  1.06rem + 0.76vw, 1.75rem);   /* 20px → 28px */
  /* A coluna de texto encolheu quando a margem esquerda passou a abrigar o
     menu (510px → 426px em 1440). O h1 acompanha: 42px em 1024 é o ponto em
     que a frase cabe em 4 linhas em vez de 5. */
  --fs-h1:       clamp(1.75rem,  1.39rem + 1.92vw, 3.125rem);  /* 28px → 50px */

  --altura-linha:        1.5;
  --altura-linha-titulo: 1.15;

  /* Tracking compensa a baixa modulação da Barlow em corpo grande. */
  --tracking-corpo:  0.01em;
  --tracking-titulo: 0.02em;
  --tracking-nav:    0.08em;

  /* --- Espaçamento -------------------------------------------------------- */
  --esp-1: 0.5rem;    /* 8px  */
  --esp-2: 1rem;      /* 16px */
  --esp-3: 1.25rem;   /* 20px — padding mobile da referência */
  --esp-4: 1.8rem;    /* 28,8px — o ritmo vertical de 2% em 1440 */
  --esp-5: 3.125rem;  /* 50px — padding lateral do header e offset do menu fixo */
  --esp-6: 5rem;      /* 80px */
  --esp-7: 8rem;      /* 128px */

  /* Ritmo entre itens editoriais: 2% da largura no desktop (28,8px em 1440),
     travado em rem no mobile porque 2% de 390px seriam 7,8px. */
  --ritmo-item: 2.5rem;

  /* --- Layout ------------------------------------------------------------- */
  /* A coluna vazia à esquerda não é decoração: é o lugar do menu fixo.
     27% = 390px em 1440 (a medida da referência), com piso de segurança em
     px para larguras onde 27% seria menor que o menu (50 + 247) + respiro.
     O piso resolve 325,8px e só perde para os 27% a partir de ~1207px. */
  --margem-esq: max(27%, calc(var(--menu-offset) + var(--menu-largura) + var(--esp-4)));
  --margem-dir: 6%;   /* 86px em 1440 */
  /* Item editorial medido em 1440: 510px de texto / 495px de imagem / 139px vazios. */
  --grade-item: 510fr 495fr 139fr;
  /* Entre 1024 e 1439 a coluna vazia final sai: o texto já perdeu largura para
     a margem do menu e não sobra ar para desperdiçar. */
  --grade-item-media: 510fr 495fr;
  --menu-largura: 247px;
  --menu-offset:  50px;
  --altura-hero-interna: 85vh;
  --largura-prosa: 34em; /* trava de medida para blocos de texto longos */

  /* --- Movimento ---------------------------------------------------------- */
  --dur-fade: 2s;      /* fadeIn de opacidade pura, como a referência */
  --dur-ui:   200ms;   /* abrir/fechar do menu mobile */
  --curva:    ease;

  /* --- Breakpoints (documentais) -------------------------------------------
     var() não funciona no prelúdio de @media; os literais abaixo se repetem
     nas media queries de layout.css. Mantidos aqui como fonte da verdade. */
  --bp-mobile:  390px;
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
  --bp-largo:   1440px;
}