/* ═══════════════════════════════════════════════════════════════════════
   Fontes, self-hosted. Subset latin.

   Por que nao o CDN do Google:
   1. O cache compartilhado acabou. O Chrome particiona cache por site desde
      a versao 86, entao "a pessoa ja tem a fonte de outro site" e falso.
   2. O CDN custa dois round-trips no caminho critico: DNS e TLS para
      fonts.googleapis.com, o CSS, e so entao o browser descobre a URL em
      fonts.gstatic.com e comeca a baixar a fonte. Mesma origem colapsa isso.
   3. Permite font-src 'self' no CSP, sem abrir dois dominios de terceiro.
   4. LGPD: tira um fluxo de IP de visitante para terceiro do site de uma
      profissional de financas.

   Fraunces e Instrument Sans sao variaveis: um arquivo cobre toda a faixa
   de peso. Sao 3 arquivos e 107KB no total.
   ═══════════════════════════════════════════════════════════════════════ */

/* Titulos. Serifa editorial quente, com eixo de tamanho optico.
   opsz alto = mais contraste e serifa mais fina, que e o registro
   pedido: refinado sem ser fragil. */
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("/assets/fontes/fraunces-var.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Corpo. Grotesca humanista levemente estreita.
   Deliberadamente nao e Inter: Inter e a fonte mais "template" da decada. */
@font-face{
  font-family:"Instrument Sans";
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url("/assets/fontes/instrument-sans-var.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Numeros. A terceira voz, e o rosto do lado tecnico do site.
   Todo valor em real, todo contador, toda saida da calculadora. */
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/assets/fontes/ibm-plex-mono-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Fraunces so faz sentido com opsz alto nos titulos grandes. Sem isto ela
   renderiza no grau optico de texto corrido e perde justamente o contraste
   fino que motivou a escolha. */
:where(h1,h2,h3,.hero__titulo){
  font-variation-settings:"opsz" 120,"SOFT" 0,"WONK" 0;
}

/* Numero nunca dança durante contagem ou recalculo da calculadora.
   Sem isto, o layout pula e vira CLS. */
:where(.num,.calc__valor,[data-num],.parcela__quanto){
  font-family:var(--f-num);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}