/*
  TOKENS: as cores, fontes e medidas tiradas das telas em assets/telas/ (26/10/2026).
  Para mudar o visual do site inteiro, mude aqui. O site.css só usa estas variáveis.

  Fontes: vêm do Google Fonts (link no templates/base.html), escolha do dono em 26/10/2026.
  - Archivo Black: títulos largos e pesados
  - Inter (400, 500, 600): texto
*/

:root {
  /* Cores (lidas pixel a pixel das telas) */
  --cor-amarelo: #edc643;          /* plantão, botão do player, barra de progresso, menu ativo */
  --cor-amarelo-claro: #fdf1b1;    /* frase sendo lida, opção marcada no menu de velocidade */
  --cor-preto: #111111;            /* texto, linhas grossas, botões escuros, player */
  --cor-branco: #ffffff;
  --cor-texto-suave: #3a3a3a;      /* linha fina, bio */
  --cor-meta: #555555;             /* chapéus (CIDADE · 6 MIN), datas, legendas */
  --cor-lido: #767676;             /* frases já lidas na narração (contraste AA no branco) */
  --cor-linha: #e6e6e6;            /* divisórias finas */
  --cor-imagem-vazia: #e9e9e6;     /* retângulo cinza das fotos */
  --cor-icone-vazio: #9a9a96;
  --cor-fundo-cinza: #f4f4f4;      /* fundo do admin, botões de busca */
  --cor-trilho: #333333;           /* barra do player ainda não tocada */

  /* Fontes */
  --fonte-titulo: "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Tamanhos: celular → desktop (clamp = mínimo, cresce com a tela, máximo) */
  --tam-gigante: clamp(4rem, 1.2rem + 9vw, 8rem);            /* "Cidade" */
  --tam-manchete: clamp(2.25rem, 1.2rem + 4.2vw, 4.75rem);    /* manchete da Home */
  --tam-titulo-noticia: clamp(2rem, 1.1rem + 3.2vw, 4rem);
  --tam-titulo-perfil: clamp(2.5rem, 1.3rem + 4vw, 4.25rem);
  --tam-titulo-item: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  --tam-titulo-destaque: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  --tam-titulo-card: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
  --tam-citacao: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  --tam-linha-fina: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem);
  --tam-corpo: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --tam-lista-texto: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  --tam-texto: 1rem;
  --tam-meta: 0.875rem;
  --tam-chapeu: 0.8125rem;

  /* Larguras e espaços */
  --largura-max: 81rem;            /* 1296px: a largura do conteúdo nas telas desktop */
  --largura-coluna: 55rem;         /* título e autoria da notícia */
  --largura-texto: 42.5rem;        /* corpo da notícia */
  --margem: 1rem;                  /* margem lateral no celular */
  --espaco-secao: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);

  /* Linhas, cantos e foco */
  --linha-grossa: 2px solid var(--cor-preto);
  --linha-fina: 1px solid var(--cor-linha);
  --raio: 0.75rem;
  --raio-pilula: 999px;
  --foco-cor: var(--cor-preto);    /* "anel preto de 2px, afastado 3px" (tela Foco visível) */
  --foco-largura: 2px;
  --foco-distancia: 3px;
}

@media (min-width: 48rem) {
  :root {
    --margem: 1.5rem;
  }
}