/* ============================================================
   ENTRA NO LOOP: tokens.css
   Fonte da verdade de cor, tipografia e espaço do tema (SPEC.md §3,
   reescrita pelo redesign v2: docs/REDESIGN-V2.md, fase V2.1). Nenhum
   componente declara hex, família de fonte ou espaçamento fora do que
   está definido nesta lista.
   ============================================================ */

/* ---------- Fontes auto-hospedadas (sem CDN) ----------
   Geist e Geist Mono: licença OFL (assets/fonts/GEIST-OFL.txt), pacote
   oficial "geist" 1.7.2 da Vercel. Arquivo variável: um só arquivo cobre
   todos os pesos (400 a 700 usados aqui), e os dois juntos pesam menos
   que os quatro arquivos da Montserrat que saíram. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-mono-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-400-italic.woff2') format('woff2');
}

/* ---------- Cor, escuro (padrão do v2) ----------
   Quem nunca escolheu tema vê o escuro, qualquer que seja o sistema.
   "Sistema" continua existindo como escolha explícita no seletor
   (data-tema="sistema"), aí sim segue o prefers-color-scheme. */
:root {
  --bg:   #0B0A0F;
  --sf:   #131119;
  --sf-2: #1A1822;
  --line: #2A2733;
  --tx:   #EDEBF2;
  --mut:  #8C8898; /* 5,7:1 sobre --bg, 5,4:1 sobre --sf */
  --img:  #1A1822; /* fundo de miniatura sem imagem */

  --mag:  #FF0099; /* 5,4:1 sobre --bg, 5,1:1 sobre --sf: passa em texto pequeno no escuro */
  --mag-suave: #FF009914; /* fundo leve de destaque (8% de --mag) */
  --ok:   #2FBF71; /* loop fechado, sucesso. 8,3:1 sobre --bg */
  --warn: #E8A33D;
  --brilho-simbolo: 28px; /* drop-shadow do símbolo no portal da página Entrar */
  --on-mag: #0B0A0F; /* texto sobre --mag: 5,4:1 */
  --sombra-pop: 0 12px 32px #00000066; /* definição do glossário, por cima do texto */

  /* Bloco escuro fixo (newsletter da lateral, CTA do meio do texto): fica
     escuro também no tema claro, então não segue --bg. */
  --noite:     #131119;
  --noite-tx:  #EDEBF2;
  --noite-mut: #8C8898;


  color-scheme: dark;

  /* ---------- Tipografia: duas vozes ----------
     Serifa para o que é humano (títulos, manchetes, loops); mono para o
     que é da máquina (hora, contagem, rota, rótulos); Geist para a
     interface e o corpo. */
  --f-display: 'Instrument Serif', Georgia, serif;
  --f-ui: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Ponte pro editor Koenig (fontes customizáveis do post). */
  --gh-font-heading: var(--f-display);
  --gh-font-body: var(--f-ui);

  --t-mega: clamp(2.75rem, 7.4vw, 6rem);   /* 44 a 96px, hero da página Entrar */
  --t-hero: 4.125rem;  /* 66px, manchete da home. No celular vira 2.5rem (ver breakpoint abaixo). */
  --t-nota: clamp(2.375rem, 5.4vw, 4.125rem); /* 38 a 66px, título da nota e do artigo */
  --t-h2-texto: 1.875rem; /* 30px, H2 dentro do texto da nota */
  --t-leitura: 1.0625rem; /* 17px, corpo do texto da nota */
  --t-h1:   2.875rem;  /* 46px */
  --t-h2:   1.625rem;  /* 26px */
  --t-h3:   1.5rem;    /* 24px */
  --t-lead: 1.1875rem; /* 19px, linha fina e título de card */
  --t-body: 1rem;      /* 16px */
  --t-ui:   0.875rem;  /* 14px, botão */
  --t-sm:   0.8125rem; /* 13px */
  --t-xs:   0.75rem;   /* 12px */
  --t-k:    0.6875rem; /* 11px, rótulo mono em caixa alta, tracking .14em */
  --t-micro: 0.625rem; /* 10px, origem da manchete na pílula */

  --lh-body: 1.6;
  --lh-display: 1.04;
  --ls-display: -.01em;
  --ls-k: .14em;

  /* ---------- Espaço, borda, raio ---------- */
  --sp: 4px; /* unidade base */
  --sp-4:  4px;
  --sp-6:  6px;
  --sp-8:  8px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-26: 26px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-34: 34px;
  --sp-40: 40px;
  --sp-44: 44px;
  --sp-64: 64px;
  --sp-96: 96px;

  --nav-celular-h: 60px; /* barra de navegação fixa no rodapé, só no celular (sem a área segura) */
  --pad-pag: 44px; /* desktop. Vira 20px abaixo de 768px (ver breakpoint abaixo): o gutter lateral nunca some. */
  --largura: 1180px; /* largura máxima do conteúdo (maquetes v2) */
  --line-w: 1px;

  /* Canto reto era decisão de marca na v1 (SPEC §3). As maquetes
     aprovadas do v2 arredondam card, campo e botão: */
  --raio-sm: 8px;    /* item de lista, miniatura */
  --raio: 14px;      /* card, bloco */
  --raio-pilula: 999px; /* botão, campo de e-mail, selo */
}

/* ---------- Cor, claro ----------
   Mesmo cuidado do escuro. --mag e --ok saíram um pouco mais fechados que
   os valores de partida (#E0007F e #1E9E5A) porque aqueles não passavam
   4,5:1 em texto pequeno sobre --bg claro (davam 4,25 e 3,1). */
:root[data-tema="claro"] {
  --bg:   #F4F3F7;
  --sf:   #FFFFFF;
  --sf-2: #ECEAF1;
  --line: #DAD7E2;
  --tx:   #0E0C12;
  --mut:  #666272; /* 5,4:1 sobre --bg */
  --img:  #ECEAF1;
  --mag:  #D10077; /* 4,8:1 sobre --bg, 5,3:1 sobre --sf */
  --mag-suave: #D1007714;
  --ok:   #157A45; /* 4,9:1 sobre --bg */
  --on-mag: #FFFFFF; /* 5,3:1 sobre --mag claro */
  --brilho-simbolo: 18px; /* 28px no fundo claro vira mancha sobre as pílulas */
  --sombra-pop: 0 12px 32px #0E0C1229;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-tema="sistema"] {
    --bg:   #F4F3F7;
    --sf:   #FFFFFF;
    --sf-2: #ECEAF1;
    --line: #DAD7E2;
    --tx:   #0E0C12;
    --mut:  #666272;
    --img:  #ECEAF1;
    --mag:  #D10077;
    --mag-suave: #D1007714;
    --ok:   #157A45;
    --on-mag: #FFFFFF;
    --brilho-simbolo: 18px;
    --sombra-pop: 0 12px 32px #0E0C1229;
    color-scheme: light;
  }
}

/* Breakpoint mobile: 768px (SPEC §6). */
@media (max-width: 767px) {
  :root {
    --pad-pag: 20px;
    --t-hero: 2.5rem;
  }
}