/* ==========================================================================
   TOKENS — Igreja dos Filhos
   --------------------------------------------------------------------------
   Token = uma decisão de design guardada numa variável, com nome.
   Em vez de escrever "#D4FF00" espalhado em 40 lugares, você escreve
   var(--cor-acento). Se um dia a cor mudar, muda aqui e o sistema inteiro
   acompanha. É o que impede a identidade de se desfazer com o tempo.
   ========================================================================== */

:root {

  /* ---------- COR ---------------------------------------------------------
     A paleta é quase monocromática de propósito: tinta e papel.
     Toda a energia está num único acento (lima), usado com moderação.
     ---------------------------------------------------------------------- */

  /* Fundos */
  --cor-tinta:        #141414;  /* preto da marca: capas, divisórias, texto */
  --cor-papel:        #F6F6F4;  /* off-white: fundo padrão (nunca branco puro) */
  --cor-cartao:       #ECECEA;  /* bloco sobre o papel */
  --cor-cartao-esc:   #1E1E1E;  /* bloco sobre a tinta */

  /* Traços e bordas */
  --cor-linha:        #DCDCD9;  /* borda fina sobre o papel */
  --cor-linha-esc:    #3A3A36;  /* borda fina sobre a tinta */

  /* Texto sobre fundo claro */
  --cor-texto:        #141414;  /* principal */
  --cor-texto-2:      #4A4A46;  /* corpo longo, leitura confortável */
  --cor-texto-3:      #6D6D68;  /* apoio, legendas */
  --cor-texto-4:      #8A8A84;  /* rótulos discretos */

  /* Texto sobre fundo escuro */
  --cor-claro:        #F2F2F0;  /* principal */
  --cor-claro-2:      #C7C7C2;  /* corpo */
  --cor-claro-3:      #9A9A94;  /* apoio */
  --cor-claro-4:      #5A5A56;  /* o mais discreto */

  /* Acento — a única cor do sistema */
  --cor-acento:       #D4FF00;  /* lima: traços, bordas, uma palavra por vez */
  --cor-acento-esc:   #9BB800;  /* lima escurecido: texto/traço fino sobre papel,
                                   onde o lima puro não teria contraste */
  --cor-acento-tinta: #20240A;  /* texto sobre um bloco lima sólido */
  --cor-acento-fraco: #F1F4DE;  /* fundo de destaque muito suave */
  --cor-acento-borda: #C9D97A;  /* borda do destaque suave */

  /* ---------- TIPOGRAFIA --------------------------------------------------
     Uma família só (Inter), em dois registros bem separados:
     TÍTULO  = peso 800, caixa alta, rastreamento fechado (quase um logotipo)
     CORPO   = peso 400, caixa normal, entrelinha generosa
     ---------------------------------------------------------------------- */

  --fonte: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  --peso-regular:   400;
  --peso-medio:     500;
  --peso-semi:      600;
  --peso-bold:      700;
  --peso-display:   800;

  /* Rastreamento (letter-spacing) */
  --track-titulo:  -0.02em;  /* títulos grandes fecham */
  --track-rotulo:   0.20em;  /* rótulos em caixa alta abrem */
  --track-corpo:    0;

  /* Entrelinha */
  --lh-titulo: 1.02;
  --lh-sub:    1.25;
  --lh-corpo:  1.45;
  --lh-longo:  1.55;  /* texto corrido de leitura demorada */

  /* ---------- ESPAÇAMENTO -------------------------------------------------
     Escala em múltiplos de 4. Usar sempre um degrau da escala evita o
     "cada bloco com um respiro diferente", que é o que faz material
     parecer amador.
     ---------------------------------------------------------------------- */

  --e-1:   4px;
  --e-2:   8px;
  --e-3:  12px;
  --e-4:  16px;
  --e-5:  24px;
  --e-6:  32px;
  --e-7:  48px;
  --e-8:  64px;
  --e-9:  96px;
  --e-10:112px;

  /* ---------- TRAÇOS E FORMAS -------------------------------------------- */
  --traco-rotulo-l:  26px;  /* comprimento do tracinho lima do rótulo */
  --traco-rotulo-a:   3px;  /* espessura */
  --barra-cartao:     6px;  /* barra lima na lateral do cartão */
  --raio:             2px;  /* cantos: quase retos; a marca não é arredondada */
  --borda:            1px;
}