/* Destila: tokens de design (SPEC.md, seção 4).
   Toda cor, raio e espaçamento do app.css vem daqui. Nenhum valor solto fora deste arquivo. */

:root {
  /* Cores */
  --fundo-pagina: #EFE9E3;
  --fundo-app: #FAFAF8;
  --painel: #FFFFFF;
  --campo: #F3F2EF;
  --borda: #E8E6E2;
  --borda-forte: #D9D6D1;
  --tinta: #111111;
  --tinta-2: #4A4A4A;
  --tinta-3: #6F6F6F; /* era #8A8A8A na referência; escurecido para contraste 4,5:1 (Lighthouse) */
  --tinta-hover: #262626;
  --destaque: #E5233B;
  --ok: #1C7C3D;
  --atencao: #B26A00;
  --erro: #B3261E;
  --veu: rgba(17, 17, 17, .38);
  --sombra: 0 1px 2px rgba(17, 17, 17, .04), 0 8px 24px rgba(17, 17, 17, .04);

  /* Raios */
  --r-painel: 24px;
  --r-card: 16px;
  --r-botao: 10px;
  --r-icone: 12px;

  /* Tipografia */
  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --t-titulo-pagina: 44px;
  --t-titulo-secao: 22px;
  --t-titulo-card: 17px;
  --t-corpo: 15px;
  --t-legenda: 13px;
  --t-migalha: 15px;
  --t-botao: 14px;
  --t-botao-pequeno: 12px;
  --t-numero-grande: 40px;

  /* Espaçamento (base 8px) */
  --e-1: 8px;
  --e-2: 16px;
  --e-3: 24px;
  --e-4: 32px;
  --e-5: 40px;
  --e-8: 64px;
  --padding-painel: 24px;
  --padding-card: 24px;
  --gap-cards: 24px;
  --altura-nav: 52px;
  --margem-app: 24px;

  /* Medidas de layout */
  --largura-barra: 300px;
  --largura-barra-recolhida: 72px;
  --largura-painel-direito: 360px;
  --icone: 20px;
  --icone-traco: 1.75;
  --quadrado-icone: 48px;
  --icone-categoria: 22px;
}