/* ==========================================================================
   tokens.css — Gianluca Costa
   Fonte: Briefing Técnico v1.0, "SISTEMA VISUAL" e "LAYOUT".
   Nenhum valor aqui é escolha livre: cores, escalas e espaçamentos vêm
   das tabelas do briefing. Alterar exige rever o briefing.
   ========================================================================== */

:root {
  /* --- Paleta ------------------------------------------------------------ */
  --bg:        #171717; /* carvão profundo   — base de toda a Home e internas */
  --bg-alt:    #202020; /* carvão claro      — cards, faixas, blocos          */
  --text:      #F2F0EB; /* branco suave      — títulos e info de maior peso   */
  --text-dim:  #B8B5AE; /* cinza quente      — descrições, legendas, metadados */
  --gold:      #BC8F3E; /* dourado fosco     — links, microtítulos, ícones    */
  --grena:     #5A1718; /* graná profundo    — Paulista FC, contato, emoção   */
  --line:      #343434; /* cinza estrutural  — divisórias e bordas de 1px     */

  /* Derivados. Preto absoluto (#000) não é usado em superfície alguma. */
  --grena-dark:  #3A1011;
  --grena-deep:  #1F0909;  /* fundo do contato, graná fechado */
  --vermelho:    #D25A55;  /* linha de força do case — ver nota de contraste */
  --gold-soft:   rgba(188, 143, 62, .38);
  --line-strong: #4A4A4A;
  --bg-blur:     rgba(23, 23, 23, .9);

  /* --- Tipografia -------------------------------------------------------- */
  --font-serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escalas do briefing: hero 42→76 · h2 32→52 · h3 22→30 · corpo 16→18 · legenda 12→14 */
  --fs-hero:    clamp(2.625rem, 2.4940rem + 1.88vw, 4rem);
  --fs-h2:      clamp(2rem,     1.3700rem + 2.35vw, 3.25rem);
  --fs-h3:      clamp(1.375rem, 1.1220rem + 0.94vw, 1.875rem);
  --fs-body:    clamp(1rem,     0.9370rem + 0.235vw, 1.125rem);
  --fs-caption: clamp(.75rem,   0.6870rem + 0.235vw, .875rem);
  /* Microtítulo, sempre em caixa-alta com tracking. 12 → 14px: a 11px fixos os
     microtítulos ficavam miúdos demais ao lado dos títulos em serif. */
  --fs-eyebrow: clamp(.75rem, .69rem + .21vw, .875rem);

  /* Entrelinhas do briefing: títulos 0,95–1,08 · corpo 1,45–1,65 */
  --lh-hero:  1.0;
  --lh-title: 1.08;
  --lh-body:  1.6;

  --ls-title:   -.015em;
  --ls-eyebrow: .18em;
  --ls-mark:    .26em; /* wordmarks e assinatura */

  /* --- Grade e espaçamento ----------------------------------------------- */
  /* O briefing pede container de 1280px. Na prática, numa tela de 1920 isso
     deixa ~320px vazios de cada lado — a página parece encolhida no meio do
     monitor. O teto sobe para 1920 e a contenção de leitura passa a ser feita
     onde importa: --measure nos textos corridos e max-width nos blocos de
     texto. Desvio consciente, registrado na spec. */
  --container: 1920px;
  --gutter:    1.5rem;   /* 24px */
  --margin-side: clamp(1.25rem, 4.5vw, 4.5rem);  /* 20 → 36 → 72px          */
  /* O briefing pede 96–140px ENTRE seções. Como cada seção paga padding nos
     dois lados, o valor por lado é a metade — senão duas seções adjacentes
     somam 280px e a página fica esparramada. */
  --space-section: clamp(3rem, 1.4rem + 3.3vw, 4.375rem);  /* 48 → 70px por lado
                                                              = 96 → 140px entre seções */
  --space-inner:   clamp(3rem, 1.6rem + 2.9vw, 4.5rem);    /* 48 → 72px dentro da seção */
  --measure: 680px;      /* texto corrido nunca passa disso                  */
  --tap: 48px;           /* altura mínima de alvo tocável no mobile          */

  --header-h: 80px;

  /* --- Acabamento -------------------------------------------------------- */
  --radius:    8px;      /* briefing: entre 6 e 10px, nunca mais             */
  --radius-sm: 6px;
  --border: 1px solid var(--line);

  /* Movimento: 250–450ms, sem exceção */
  --t-fast: 200ms;
  --t:      320ms;
  --t-slow: 440ms;
  --ease:   cubic-bezier(.22, .61, .36, 1);

  /* Grão: 2–4% de opacidade, só no fundo. Ruído em SVG, zero requisições. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
  :root { --header-h: 68px; }
}