/* rodrigobelo.pt - tokens D2 (seguir de perto dennissnellenberg.com).
   Têm de bater com design.md. Cores e tamanhos medidos no site de referência
   (DevTools, 06/10/2026); onde falhava o contraste AA, ajustado e anotado. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fontes/bricolage-grotesque-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fontes/bricolage-grotesque-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Cor */
  --tinta: #1c1d20;      /* carvão: texto sobre branco, rodapé, botão redondo (Dennis: rgb 28,29,32) */
  --carvao: #141517;     /* cortina de abertura (Dennis: rgb 20,21,23) */
  --branco: #ffffff;     /* fundo das secções claras (Dennis: #fff) */
  --cinza: #8e9394;      /* fundo da entrada (Dennis: #999d9e, escurecido para AA: ver design.md) */
  --azul-claro: #6e82f0; /* o azul do site em tom claro para texto sobre o carvão: 4,9:1 (o azul normal só dá 3,2:1) */
  --azul: #455ce9;       /* único acento: botão redondo, foco, fundo do botão do menu aberto (Dennis: rgb 69,92,233) */
  --texto-2: #5c5f66;    /* texto secundário sobre branco */
  --claro-2: #a7a9ae;    /* texto secundário sobre carvão */
  --linha: rgb(28 29 32 / .18);   /* fio de 1px sobre branco (decorativo) */
  --linha-esc: rgb(255 255 255 / .22); /* fio de 1px sobre carvão (decorativo) */
  --pastilha: #2a2c31;   /* fundo da pastilha da entrada e do botão do menu */
  --erro: #ff9b8f;       /* erros do formulário sobre o carvão: 8,3:1; vem sempre com texto e "!", nunca só cor */
  --campo-linha: rgb(255 255 255 / .55); /* linha dos campos do formulário: UI com 3:1 pelo menos (WCAG 1.4.11), ≈5,9:1 sobre o carvão */

  /* Letra: Bricolage Grotesque, 2 ficheiros (Regular 400 e ExtraBold 800), só latim, OFL */
  --letra: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --peso-corpo: 400;     /* texto, frase grande, etiquetas, ligações */
  --peso-titulo: 800;    /* nome gigante, títulos, botões redondos: o mesmo peso do nome */
  --track-nome: -.06em;  /* nome gigante (como na folha de letras, opção 6) */
  --track-titulo: -.04em;
  --track-corpo: -.01em;

  /* Escala (computador 1440 = valores do Dennis; telemóvel em clamp) */
  /* --t-nome: 30vw abaixo de 768 px, 15vw (216 px a 1440) a partir de 768: ver no fim */
  --t-linha: clamp(2.25rem, 4.2vw, 5rem);  /* 60 px a 1440 (Dennis: 75,6 = 5,25vw; descemos porque os nomes dos conceitos são mais compridos) */
  --t-titulo: clamp(1.875rem, 3.75vw, 4.5rem); /* 54 px a 1440: títulos de oferta e de passo (h2 do Dennis) */
  --t-grande: clamp(2.5rem, 6.4vw, 7.5rem);    /* 92 px a 1440: palavras de "Porquê eu" */
  --t-rodape: clamp(3rem, 6.1vw, 7.25rem); /* 88,2 px a 1440: "Vamos falar?" */
  --t-frase: clamp(1.5rem, 2.3vw, 2.5rem); /* 33,1 px a 1440: frase grande */
  --t-corpo: clamp(1.0625rem, .35vw + 1rem, 1.25rem); /* 17,28 px a 1440 */
  --t-pequeno: .9rem;    /* 14,7 px a 1440 */
  --t-etiqueta: .8125rem; /* 13 px (o Dennis usa 10,4: subimos para legibilidade) */

  /* Espaço */
  --margem: clamp(1.25rem, 8vw, 10rem);    /* 115 px a 1440: início dos fios */
  --recuo: clamp(0rem, 8vw, 10rem);        /* recuo extra do conteúdo: 230 px a 1440 = margem + recuo */
  --seccao-y: clamp(6rem, 14vw, 12.5rem);
  --botao-redondo: clamp(7.5rem, 12vw, 10.8rem); /* 173 px a 1440 */

  /* Forma: fios e círculos/pílulas; imagens a raio 0 */
  --r-pilula: 999px;
  --curva: clamp(2rem, 8vw, 7.5rem);       /* altura da curva entre o branco e o carvão */

  /* Movimento: curvas medidas no Dennis */
  --e-nav: cubic-bezier(.7, 0, .2, 1);     /* 0,8 s, ligações do menu, atraso 0,03 s entre itens */
  --e-linha: cubic-bezier(.7, 0, .3, 1);   /* 0,3 s, texto das linhas ao passar o rato */
  --e-menu: cubic-bezier(.36, 0, .66, 0);  /* 0,4 s, botão do menu */
  --e-saida: cubic-bezier(.16, 1, .3, 1);  /* expo.out: entradas de texto */
}

@media (max-width: 767px) {
  :root { --t-nome: 30vw; --margem: 1.25rem; --recuo: 0rem; }
}
@media (min-width: 768px) {
  :root { --t-nome: 15vw; }
}