/* Em Busca: tokens de design. Gerado a partir de tokens.json. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Atkinson+Hyperlegible+Next:wght@400;700&display=swap');

:root {
  /* Cores */
  --papel: #FAF6EC;
  --areia: #F0E7D3;
  --areia-escura: #E6DCC5;
  --campo: #FFFDF8;
  --linha: #DCCFB2;
  --marinho: #17324D;
  --marinho-divisor: #3A5775;
  --marinho-texto-suave: #C9D5E0;
  --marinho-link: #D6E0EA;
  --ambar: #F4A11A;
  --ambar-texto: #9A5A00;
  --ambar-texto-hover: #6E4000;
  --texto-suave: #4A5E72;
  --texto-placeholder: #6F6048;

  /* Famílias */
  --font-display: Archivo, "Arial Narrow", sans-serif;
  --font-texto: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* radius */
  --radius-selo: 8px;
  --radius-campo: 12px;
  --radius-linha: 16px;
  --radius-faixa-preco: 20px;
  --radius-painel: 24px;
  --radius-imagem: 32px;
  --radius-pilula: 999px;
  --radius-lente: 50%;

  /* borda */
  --borda-filete: 1.5px;
  --borda-controle: 2px;
  --borda-atencao: 2.5px;
  --aro-lente-p: 6px;
  --aro-lente-m: 12px;
  --aro-lente-g: 34px;

  /* altura */
  --alvo-minimo: 44px;
  --botao: 48px;
  --campo-altura: 54px;
  --botao-destaque: 64px;
}

/* Estilos de texto. Archivo usa font-stretch conforme o uso de cada estilo. */
.t-hero { font-family: var(--font-display); font-size: 136px; line-height: 0.88; font-weight: 800; letter-spacing: -2px; font-stretch: 72%; }
.t-preco-destaque { font-family: var(--font-display); font-size: 92px; line-height: 1; font-weight: 800; letter-spacing: -1px; font-stretch: 78%; }
.t-categoria { font-family: var(--font-display); font-size: 84px; line-height: 0.9; font-weight: 800; letter-spacing: -2px; font-stretch: 120%; }
.t-titulo-secao { font-family: var(--font-display); font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -1px; font-stretch: 90%; }
.t-titulo-admin { font-family: var(--font-display); font-size: 48px; line-height: 1; font-weight: 800; letter-spacing: -0.5px; font-stretch: 88%; }
.t-preco { font-family: var(--font-display); font-size: 44px; line-height: 1.1; font-weight: 800; font-stretch: 78%; }
.t-titulo-bloco { font-family: var(--font-display); font-size: 26px; line-height: 1.15; font-weight: 800; font-stretch: 88%; }
.t-wordmark { font-family: var(--font-display); font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -0.5px; font-stretch: 115%; }
.t-corpo-grande { font-family: var(--font-texto); font-size: 18px; line-height: 1.55; font-weight: 400; }
.t-corpo { font-family: var(--font-texto); font-size: 16px; line-height: 1.6; font-weight: 400; }
.t-nome-produto { font-family: var(--font-texto); font-size: 21px; line-height: 1.3; font-weight: 700; }
.t-botao { font-family: var(--font-texto); font-size: 17px; line-height: 1.2; font-weight: 700; }
.t-rotulo { font-family: var(--font-texto); font-size: 14px; line-height: 1.4; font-weight: 400; }
.t-legenda { font-family: var(--font-texto); font-size: 13px; line-height: 1.45; font-weight: 400; }

body { margin: 0; background: var(--papel); color: var(--marinho); font-family: var(--font-texto); }
a { color: var(--ambar-texto); } a:hover { color: var(--ambar-texto-hover); }