/* A voz do produto. Archivo é variável nos dois eixos — peso 400 a 800 e largura 62,5%
 * a 125% — então uma família só cobre a manchete larga, o corpo e o botão miúdo.
 *
 * Servida daqui, não do Google: o aplicativo instala na tela de início e precisa abrir
 * com a marca certa mesmo na rede ruim de uma academia, e assim nenhum dado do usuário
 * passa por terceiro. `swap` garante que o texto aparece na hora, na fonte do sistema,
 * e troca quando a Archivo chega.
 */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-stretch:62.5% 125%;
  font-display:swap;
  src:url(/fontes/archivo-latin.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;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-stretch:62.5% 125%;
  font-display:swap;
  src:url(/fontes/archivo-latin-ext.woff2) format('woff2');
  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 do FramePersonal — a única fonte de cor, raio, elevação, tipo e espaço.
 *
 * Fica separado do base.css porque o editor (app.html) tem folha própria e não carrega
 * as regras de componente do site, mas precisa exatamente das mesmas variáveis. Quando
 * elas moravam só no base.css, os tokens aplicados no editor não resolviam e o
 * border-radius dos botões caía para zero.
 */
:root{
  /* Superfícies, do fundo ao que flutua. Antes existia uma só, e por isso nada tinha
     hierarquia: o cartão, o campo e o painel pesavam igual. */
  --bg:#060b09;
  --surface-1:#0d1713;
  --surface-2:#14201b;
  --surface-3:#1c2b24;

  /* Cada superfície tem a sua tinta. O par é o que garante contraste sem adivinhação. */
  --ink:#f4fbf6;
  --ink-muted:#a7b9ad;
  --ink-dim:#71847b;

  --line:#24332b;
  --line-strong:#33463b;

  --accent:#c4fc62;
  --accent-alto:#ddfeaa;
  --accent-hover:#d2fd86;
  --accent-ink:#0a1410;
  --accent-soft:rgba(196,252,98,.14);
  --ring:rgba(196,252,98,.5);

  --ok:#7ee59b;
  --err:#ff6b60;

  /* Uma escala só de raio, derivada de um valor. Mudar --raio muda o produto inteiro. */
  --raio:14px;
  --raio-sm:8px;
  --raio-md:12px;
  --raio-lg:var(--raio);
  --raio-xl:22px;
  --raio-2xl:26px;
  --raio-full:999px;

  /* Três elevações, não nove sombras avulsas. Quanto mais alto, mais difusa e mais longe. */
  --elev-1:0 1px 2px rgba(0,0,0,.3);
  --elev-2:0 10px 30px rgba(0,0,0,.35);
  --elev-3:0 26px 70px rgba(0,0,0,.45);
  --brilho:0 10px 28px rgba(196,252,98,.2);

  --transicao:150ms cubic-bezier(.2,.7,.3,1);

  /* A fonte também é token: o canvas desenha o selo, o card e o ranking com a mesma
     pilha, senão o vídeo que circula sai com uma marca diferente da do site. */
  --fonte:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* Largura expandida para manchete; a Archivo é variável, então é a mesma família. */
  --largura-display:118%;
  --largura-texto:100%;

  /* Escala tipográfica. Havia 28 tamanhos no produto, sete deles espremidos entre 12 e
     15px — diferenças que ninguém enxerga mas que tiram o ritmo da página. São dez
     degraus, em razão aproximada de 1,2. */
  --txt-2xs:10px;
  --txt-xs:12px;
  --txt-sm:14px;
  --txt-md:16px;
  --txt-lg:19px;
  --txt-xl:23px;
  --txt-2xl:28px;
  --txt-3xl:34px;
  --txt-4xl:42px;
  --txt-5xl:52px;

  /* Escala de espaço. Eram 36 valores distintos, ou seja: cada medida foi decidida na
     hora. Treze degraus, base 4, com meios embaixo onde a interface precisa de precisão. */
  --e-1:2px;  --e-2:4px;   --e-3:6px;   --e-4:8px;
  --e-5:12px; --e-6:16px;  --e-7:20px;  --e-8:24px;
  --e-9:32px; --e-10:40px; --e-11:56px; --e-12:72px;

  /* Glifos não são texto. Um ⌫ ou um ⟳ desenha a própria caixa e responde por um alvo
     de toque — forçá-los na escala tipográfica encolheu o botão de ação rápida em 2px. */
  --icone-sm:18px;
  --icone-md:25px;


  /* Nomes antigos, ainda em uso pelas páginas. */
  --panel:var(--surface-1);
  --panel2:var(--surface-2);
  --muted:var(--ink-muted);
  --dim:var(--ink-dim);
  --accent2:var(--accent-alto);
}

/* No iPhone o app ocupa a tela inteira (viewport-fit=cover), inclusive a faixa do relógio,
   Wi-Fi e bateria e a barrinha de baixo. O recuo empurra tudo pra área livre (FA 30/10/2026).
   Fica no html pra não brigar com o padding próprio do body de cada página. */
html{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}