/* Escala de tipografia.
   O desenho e feito para uma largura de 1905px, onde --vw-unit congela em
   19.05px e o corpo de texto da 12.95px. Abaixo disso tudo escala linearmente
   com a largura da janela, e o texto ficava ilegivel: 9.8px a 1440px, 7.0px a
   1024px, 3.3px a 481px.

   Os pisos em rem abaixo travam essa descida. Estao postos no tamanho que o
   proprio desenho define a 1905px (13px para o corpo), por isso acima de
   ~1900px nada muda em relacao ao original: o vw volta a governar. Os titulos
   h1 e h2 nao levam piso porque a banda de tablet trata deles e a 1025px ainda
   dao 34px e 22px. */
:root {
  --font-h1: calc(3.35 * var(--vw-unit));
  --font-h2: calc(2.18 * var(--vw-unit));
  --font-h3: max(0.8125rem, calc(1.22 * var(--vw-unit)));
  --font-h4: max(0.8125rem, calc(0.74 * var(--vw-unit)));
  --font-p: max(0.8125rem, calc(0.68 * var(--vw-unit)));
}

h1 {
  font-size: var(--font-h1);
}

h2 {
  font-size: var(--font-h2);
}

h3 {
  font-size: var(--font-h3);
}

h4 {
  font-size: var(--font-h4);
}

p {
  font-size: var(--font-p);
}

/* Telemovel e tablet: pisos em rem sobre a escala em vw.
   Sem os pisos, num ecra de 390px o corpo de texto dava 2.85vw = 11.1px, e
   187 dos 222 elementos de texto da home ficavam abaixo de 15px. Acima de
   480px o --vw-unit congela (ver base.css), por isso estes valores mantem-se
   constantes ate aos 1024px em vez de crescerem com a janela. */
@media (max-width: 1024px) {
  :root {
    --font-h1: max(2.2rem, calc(9.2 * var(--vw-unit)));
    --font-h2: max(1.6rem, calc(6.2 * var(--vw-unit)));
    --font-h3: max(1.25rem, calc(4.2 * var(--vw-unit)));
    --font-h4: max(1.05rem, calc(3 * var(--vw-unit)));
    --font-p: max(1rem, calc(2.85 * var(--vw-unit)));
  }
}