/* ============================================================
   Zamp Creative · versão 2.0
   tokens.css · variáveis globais. Nenhum valor cru fora daqui.
   ============================================================ */

/* Switzer, self-hospedada. Grotesca neutra de desenho suíço,
   escolhida na direção "padrão europeu" da 2.0. Arquivos em
   assets/fonts/, baixados da Fontshare (licença livre). */
@font-face{font-family:'Switzer';src:url('../fonts/switzer-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/switzer-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/switzer-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* --- Cor ------------------------------------------------
     Laranja é acento, não superfície: link ativo, foco, fio de
     seção e o único botão sólido colorido do site. */
  --tinta:            #0A0A0A;
  --tinta-media:      #5C5852;
  --tinta-fraca:      #6A645E;
  --terreno:          #F6F4F0;
  --terreno-alto:     #FFFFFF;
  --terreno-escuro:   #0A0A0A;
  --fio:              #E0DBD3;
  --fio-forte:        #C9C2B8;
  --fio-escuro:       #262320;
  --acento:           #FF5500;
  --acento-claro:     #FF7A1A;
  /* Laranja da marca rebaixado só para texto sobre terreno claro:
     lê como o mesmo laranja e passa AA, que o #FF5500 não passa. */
  --acento-tinta:     #C43C00;
  --tinta-invertida:  #F6F4F0;
  --tinta-invertida-media: #A29B92;

  /* --- Tipografia ---------------------------------------- */
  --fonte: 'Switzer', ui-sans-serif, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;

  --t-display: clamp(3rem, 9.2vw, 7.5rem);
  --t-h1:      clamp(2.5rem, 6.4vw, 5rem);
  --t-h2:      clamp(2rem, 4.2vw, 3.25rem);
  --t-h3:      clamp(1.375rem, 2.1vw, 1.75rem);
  --t-h4:      clamp(1.0625rem, 1.2vw, 1.1875rem);
  --t-corpo:   clamp(1.0625rem, .42vw + .95rem, 1.1875rem);
  --t-pequeno: .9375rem;
  --t-marcador:.75rem;

  --peso-leve: 300;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;

  --entre-display: -.045em;
  --entre-titulo:  -.032em;
  --entre-marcador: .18em;

  --altura-titulo: .97;
  --altura-corpo:  1.62;
  --medida: 64ch;

  /* --- Espaço (base 4, ritmo de seção em múltiplos de 8) -- */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;  --e-6: 32px;  --e-7: 48px;  --e-8: 64px;
  --e-9: 96px;  --e-10: 128px; --e-11: 160px;
  --secao: clamp(72px, 9vw, 152px);
  --margem: clamp(20px, 5vw, 72px);
  --largura: 1320px;
  --coluna: minmax(0, 1fr);

  /* --- Raio -----------------------------------------------
     Arredondamento leve, dentro da faixa liberada de 12 a 20px
     para bloco grande. A pílula existe em um lugar só: o botão
     de orçamento, que é a assinatura do cabeçalho. */
  --raio-0: 0px;
  --raio-1: 3px;
  --raio-sutil: 8px;
  --raio-midia: 14px;
  --raio-pilula: 999px;

  /* --- Movimento ----------------------------------------- */
  --t-micro: 180ms;
  --t-curto: 240ms;
  --t-medio: 520ms;
  --t-longo: 760ms;
  --curva-saida: cubic-bezier(.32, .72, 0, 1);
  --curva-entrada: cubic-bezier(.22, 1, .36, 1);
  --curva-rapida: cubic-bezier(.4, 0, .2, 1);

  /* --- Forma ----------------------------------------------
     Seta diagonal do sistema, usada como máscara. Fica aqui
     para existir em um lugar só. */
  --marca-svg: url("../img/zamp-exclamacao.svg");
  --seta-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18L18 6M9 6h9v9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
}

/* No telefone o clamp da display trava no piso de 3rem e para de
   crescer: o título encolhe em relação à tela e sobra branco na capa.
   Aqui ele volta a acompanhar a largura. O teto de 3.5rem é o ponto
   em que "pubblicazione,", a palavra mais longa do H1, ainda cabe
   entre as margens; acima disso ela estoura. */
@media (max-width: 640px){
  :root{ --t-display: clamp(2.75rem, 13.4vw, 3.5rem); }
}