/* src/styles/tokens.css
   Sistema novo (redesign 2026, docs 2/referencia/redesign-2026/static/css/tokens.css)
   é a fonte canônica abaixo. Os nomes antigos (--cor-*, --esp-*, --fonte-*,
   --texto-*) viram aliases dos tokens novos, para que categoria/produto/
   catalogo/landing/mangueira/institucionais (ainda não portados — etapas
   b-e) continuem funcionando sem revisão visual até a vez de cada um. */
:root {
  /* ===== Sistema novo — canônico ===== */
  --aco: #151A22;
  --aco-2: #1D242F;
  --aco-3: #29313E;
  --cimento: #ECE8E1;
  --papel: #F6F4F0;
  --branco: #FFFFFF;
  --amarelo: #EEAC2C;
  --amarelo-2: #D99A1E;
  --amarelo-suave: #FBEFD6;
  --vermelho: #D9252B;
  --verde-zap: #25D366;

  --texto: #151A22;
  --texto-2: #545B67;
  --texto-3: #7D8491;
  --inv: #EEF0F4;
  --inv-2: #A7AFBC;
  --inv-3: #7B8492;

  --linha: rgba(21, 26, 34, .12);
  --linha-forte: rgba(21, 26, 34, .22);
  --linha-inv: rgba(255, 255, 255, .10);
  --linha-inv-forte: rgba(255, 255, 255, .2);

  --f-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --f-corpo: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --t-hero: clamp(3rem, 7vw, 6.5rem);
  --t-xl: clamp(2.5rem, 5vw, 4.25rem);
  --t-lg: clamp(2rem, 3.6vw, 3.25rem);
  --t-md: clamp(1.5rem, 2.2vw, 2rem);
  --t-sm: 1.375rem;
  --t-lead: clamp(1.0625rem, 1.3vw, 1.25rem);
  --t-corpo: 1.0625rem;
  --t-apoio: .9375rem;
  --t-mini: .8125rem;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --secao: clamp(72px, 9vw, 128px);
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 32px);
  --cab-h: 76px;

  --raio: 2px;
  --corte: 18px;
  --sombra-1: 0 1px 2px rgba(21,26,34,.06), 0 4px 14px rgba(21,26,34,.06);
  --sombra-2: 0 2px 6px rgba(21,26,34,.08), 0 18px 40px rgba(21,26,34,.12);
  --sombra-3: 0 30px 80px rgba(0,0,0,.35);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --alvo: 44px;

  /* ===== Aliases do sistema antigo — usados em páginas não portadas =====
     Mesmos valores do sistema novo, só com os nomes que essas páginas já
     referenciam. Remover quando a última página velha for portada. */
  --cor-cimento: var(--cimento);
  --cor-aco: var(--aco);
  --cor-aco-2: var(--aco-2);
  --cor-amarelo: var(--amarelo);
  --cor-amarelo-escuro: var(--amarelo-2);
  --cor-oleo: var(--texto-2);
  --cor-branco: var(--branco);
  --cor-vermelho: var(--vermelho);
  --cor-whatsapp: var(--verde-zap);
  --texto-inv: var(--inv);
  --texto-inv-2: var(--inv-2);

  --fonte-display: var(--f-display);
  --fonte-corpo: var(--f-corpo);
  --fonte-mono: var(--f-mono);

  /* Escala tipográfica antiga (páginas não portadas) — intocada. */
  --texto-display: clamp(3.25rem, 7.4vw, 6.75rem);
  --lh-display: 0.92;
  --ls-display: -0.01em;
  --texto-titulo-secao: clamp(2.5rem, 4.6vw, 4rem);
  --lh-titulo-secao: 0.95;
  --texto-produto: 1.125rem;
  --texto-corpo: 1.0625rem;
  --lh-corpo: 1.6;
  --texto-apoio: 0.875rem;
  --texto-lead: 1.1875rem;

  /* Escala de espaçamento antiga (páginas não portadas) — intocada. Não
     renumerar: quebraria o espaçamento dessas páginas sem revisão visual. */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 16px;
  --esp-4: 24px;
  --esp-5: 32px;
  --esp-6: 48px;
  --esp-7: 64px;
  --esp-8: 96px;
  --secao-py: 72px;

  --alvo-toque-min: 44px;
  --raio-borda: 0px; /* botões e cards do sistema antigo: cantos retos */
  --borda: 1px solid rgba(28, 34, 44, 0.14);

  /* breakpoints — referência, media query não lê var:
     360–767 coluna única · 768–1023 2 colunas · 1024+ 3–4 colunas */
}