/* Fontes (variáveis, só latin + latin-ext, que cobrem PT e EN) */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-wght-normal.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;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Tight Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-tight-latin-wght-normal.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;
}
@font-face {
  font-family: "Inter Tight Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-tight-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(../fonts/jetbrains-mono-latin-wght-normal.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;
}
@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(../fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tokens espelhando as variáveis do Figma (❤️ Saúde) */
:root {
  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter Tight Variable", "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, monospace;

  --color-verde-atlantico-950: #04423c;
  --color-menta-100: #daffd7;
  --color-menta-200: #b8f0b4;
  --color-melancia: #e71549;
  --color-neutro-50: #ffffff;
  --color-neutro-100: #f4f2ed;
  --color-neutro-200: #e6e4df;
  --color-neutro-500: #a3a3a3;
  --color-neutro-600: #6b6560;
  --color-neutro-700: #3d3a36;
  --color-neutro-800: #404040;
  --color-neutro-900: #262626;
  --color-neutro-950: #1a1a1a;
  --color-overlay: #0d2321;

  --shadow-2xs: 0 1px 0 0 rgb(0 0 0 / 0.05);

  /* Moldura do fundo das páginas Score e Check-up (e do card da home quando abre, js/card-open.js). Abaixo
     do desktop não há moldura: o fundo ocupa a tela inteira. No desktop ele fica recuado 8px das bordas da
     tela, como o bloco do topo da página Sobre, com cantos de 15px */
  --frame-inset: 0px;
  --frame-radius: 0px;

  /* Espaçamento entre letras do Inter de acordo com o tamanho da fonte, pela fórmula de rsms.me/inter/lab
     ("dynamic metrics"): -0.0223 + 0.185 × e^(-0.1745 × tamanho em px), em em. Usada em cada texto em Inter
     (letter-spacing: var(--tracking-inter)); o em é resolvido no elemento que usa a variável, então cada um
     calcula o seu, inclusive os de tamanho fluido. tan(atan2(1em, 1px)) é o tamanho da fonte em px, sem
     unidade. Não vale para o Inter Tight (títulos e botões), que é outra família, já mais apertada */
  --tracking-inter: calc((-0.0223 + 0.185 * exp(-0.1745 * tan(atan2(1em, 1px)))) * 1em);

  /* Transição de cores dos links e botões */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-colors: color 150ms var(--ease-out), background-color 150ms var(--ease-out);
}

@media (min-width: 1024px) {
  :root {
    --frame-inset: 8px;
    --frame-radius: 15px;
  }
}

/*
  Pontos de quebra (media queries não aceitam variáveis; ficam documentados aqui):

  md               (min-width: 768px)
  lg  (desktop)    (min-width: 1024px)
  wide             (min-width: 1024px), (min-width: 600px) and (min-height: 501px)
                   Layout "desktop" da home: desktop e qualquer tela a partir de 600px que não seja
                   celular deitado (tablets em pé/deitados, janelas estreitas)
  mobile-landscape (orientation: landscape) and (max-width: 1023px) and (max-height: 500px)
                   Celular deitado: tela larga e baixa, abaixo do desktop
  about-wide       (min-width: 1240px) and (min-height: 640px)
                   Só a página Sobre: a atleta fica fixa ao lado do texto (abaixo disso, depois dele)

  Ordem no CSS (a última vence): md → lg → about-wide → wide → mobile-landscape
*/