/* ============================================================
   FUNDAÇÃO
   Tokens do site Metta. Este arquivo não desenha nada: ele só
   nomeia valores. Quem desenha são os arquivos de componente.

   Carrega antes de tudo, e vale tanto para o protótipo quanto
   para o WordPress, onde ele entra global. Definir token em
   :root é seguro em qualquer lugar, porque variável sozinha não
   estiliza elemento nenhum. O que precisa de escopo são as
   regras de elemento, e essas moram em conteudo.css.

   Os valores saíram de auditoria do CSS já construído, que por
   sua vez foi reconciliado dobra a dobra com o Figma. Não é
   escala inventada: é a escala que o desenho usa.
   ============================================================ */

:root{

  /* ---------- COR ----------
     O CSS tinha 104 hexadecimais literais que colapsam em 25
     tons perceptualmente distintos. O resto era ruído de
     exportação: seis amarelos a menos de 26 de distância entre
     si, quatro escuros que ninguém diferencia na tela. Aqui
     ficam os 25 que sobrevivem, com nome de papel e não de cor,
     porque é o papel que não muda quando a marca evoluir. */

  /* tinta e superfície */
  --ink:            #0c161b;   /* texto principal e fundo escuro da marca */
  --ink-2:          #1b2a33;   /* escuro um passo acima, painel dentro do escuro */
  --corpo:          #111111;   /* corpo longo; quase ink, mantido por legibilidade */
  --branco:         #ffffff;
  --papel:          #eff1f3;   /* fundo claro alternativo, banda de clientes */
  --gelo:           #e8f3f9;   /* superfície azulada clara */
  --nevoa:          #e6ecef;   /* card claro sobre fundo claro */
  /* --papel e --cinza-card convergiram pro mesmo hexadecimal em 18/09/2026,
     decisão do Renan: todo fundo de card do site vira #eff1f3, art-card
     incluído. Os dois nomes continuam separados de propósito, não é
     sobra de auditoria: --papel é a superfície clara alternativa de
     PÁGINA (hoje só em .art-card e na caixa de índice do artigo no
     celular, os dois em css/artigos.css); --cinza-card é o fundo dos
     CARDS do site. Coincidem em valor hoje, mas guardam papéis diferentes,
     e se um dia precisarem divergir de novo o token certo já está no
     lugar certo. Não funda os dois num só sem checar essa nota primeiro. */
  --cinza-card:     #eff1f3;

  /* azuis de estrutura */
  --hero-bg:        #34444d;   /* fundo do hero escuro */
  --painel:         #283845;   /* painel escuro dentro de dobra clara */
  --apoio:          #435965;   /* texto de apoio sobre claro */
  --muted:          #738f9e;   /* texto terciário */
  --muted-2:        #7e8c9a;
  --linha:          #bbcfd9;   /* traço e borda azulada */
  --divisor:        #d8d8d8;   /* régua neutra */
  --assinatura:     #e0e8ed;
  --nav-texto:      #b3b3b3;   /* item de menu, valor do Figma */

  /* marca.
     Regra de uso: em interface o amarelo é só CTA e símbolo.
     Em peça editorial ele pode virar superfície. --amarelo é o
     amarelo da marca; --amarelo-luz é realce e parada de
     gradiente, não substituto. */
  --amarelo:        #ffbe18;
  --amarelo-luz:    #ffc93f;
  --amarelo-suave:  #ffeaaa;
  --amarelo-papel:  #fff2cd;

  /* vidro sobre escuro */
  --vidro:          rgba(255,255,255,.09);
  --vidro-forte:    rgba(255,255,255,.16);

  /* ---------- TIPOGRAFIA ----------
     Duas famílias e nada mais. Zalando Sans Expanded carrega o
     display, Inter carrega o texto. O chapéu é a exceção que
     confunde: ele é pequeno mas usa a família display. */
  --display: 'Zalando Sans Expanded', 'Zalando Sans', 'Inter', system-ui, sans-serif;
  --texto:   'Inter', system-ui, -apple-system, sans-serif;

  /* peso. 300 e 800 aparecem duas vezes cada no site inteiro e
     estão fora desta escala de propósito: ou viram 400 e 700,
     ou entram aqui. É decisão de design, não de código. */
  --peso-regular: 400;
  --peso-medio:   500;
  --peso-semi:    600;
  --peso-bold:    700;

  /* corpo de texto, por papel.
     A auditoria achou 54 corpos distintos. Estes treze cobrem a
     quase totalidade; o que sobra é número decorativo (200, 320,
     422) ou resíduo de auto-layout do Figma (13.5, 15.7, 37.977),
     que não vira token porque não é decisão, é acidente. */
  --fs-rotulo:    12px;   /* chapéu, legenda de gráfico */
  --fs-nota:      13px;   /* nota, título de coluna de rodapé */
  --fs-corpo-s:   14px;   /* corpo pequeno, texto de card */
  --fs-corpo-d:   15px;   /* corpo denso, parágrafo de apoio */
  --fs-corpo:     16px;   /* corpo padrão */
  --fs-lead:      18px;   /* primeiro parágrafo, chamada */
  --fs-t4:        20px;   /* H4 */
  --fs-t3:        24px;   /* H3, título de card */
  --fs-t3-g:      28px;
  --fs-t2:        32px;   /* H2 */
  --fs-t1:        40px;   /* H1 */
  --fs-statement: 42px;   /* frase de impacto */
  --fs-numero:    50px;   /* número grande */

  /* escala responsiva do display.
     Estes cinco são a exceção da tabela acima: eles NÃO são fixos, são
     reafinados em cada breakpoint lá no styles.css, e é por isso que
     existem com nome próprio em vez de apontar direto para a escala. O
     valor aqui é o do desktop 1440, que é o do arquivo.

     Cuidado que já custou uma rodada: token que só é declarado dentro
     de media query fica SEM VALOR na largura base. Auditoria de token
     órfão precisa olhar o escopo da declaração, não só a existência. */
  --fs-hero:      40px;   /* .d-hero, mesmo corpo do H1 */
  --fs-statement: 42px;   /* .d-statement, frase de impacto */
  --fs-quote:     30px;   /* .d-quote, citação */
  --fs-number:    50px;   /* .d-number, número grande */
  --fs-card:      24px;   /* .d-card, título de card */

  /* entrelinha, por densidade */
  --lh-solido: 1.04;   /* display grande, título de dobra */
  --lh-justo:  1.16;
  --lh-medio:  1.3;
  --lh-texto:  1.5;
  --lh-solto:  1.65;   /* corpo longo */

  /* ---------- ESPAÇO ----------
     Base 4. O desenho não está numa grade de 8: só 40% dos
     valores são múltiplos de 8, contra 58% de múltiplos de 4.
     Forçar 8 moveria peça que já foi conferida contra o arquivo,
     então a grade é 4 e os fora de grade (6, 10, 14, 18, 26, 34)
     ficam registrados como exceção, não viram token. */
  --e-1:   4px;
  --e-2:   8px;
  --e-3:  12px;
  --e-4:  16px;
  --e-5:  20px;
  --e-6:  24px;
  --e-7:  32px;
  --e-8:  40px;
  --e-9:  48px;
  --e-10: 64px;
  --e-11: 80px;
  --e-12: 120px;

  /* ---------- GRADE ---------- */
  --pagina:    1440px;
  --container: 1272px;
  --margem:    84px;
  --gutter:    84px;   /* respiro lateral, encolhe nos breakpoints */

  /* ---------- RAIO ---------- */
  --r-pequeno: 12px;
  --r-medio:   24px;
  --r-grande:  40px;
  --r-pilula:  100px;  /* pílula fica fora da superelipse iOS */
  /* canto da capa DENTRO do card de 40 (Figma 1294:956, o card de artigo).
     Morava no :root de artigos.css, que só carrega em blog e artigo; o
     card de caso usa a mesma medida e vive em resultados, mentoria e nas
     oito páginas de caso, onde aquele arquivo não entra. */
  --r-capa:    32px;

  /* ---------- RAIO NA SUPERELIPSE ----------
     O canto iOS avança um décimo além do raio declarado, então o valor
     precisa CRESCER 10% para o canto ler igual ao do arquivo. É a mesma
     conta que o card de solução já fazia sozinho desde 17/09 (74 vira
     81,4) e que a dobra de resultados da home fez em 17/09. Estes dois
     ficaram para trás naquela rodada.
     Só vale onde corner-shape entra: a pílula de raio 100 fica de fora,
     porque ali o canto já é semicírculo. */
  --r-grande-ios: 44px;     /* 40 x 1,1 */
  --r-capa-ios:   35.2px;   /* 32 x 1,1 */

  /* ---------- CARD DE LISTAGEM ----------
     O card de artigo (Figma 1294:955) é o padrão, e o card de caso usa a
     MESMA caixa: moldura, capa e miolo. Estes tokens existem para os dois
     lerem da mesma fonte, em vez de cada arquivo repetir o número.

     Os valores fora da grade de 4 (25 e 29) continuam sendo exceção da
     escala de espaço, como diz a nota lá em cima: eles não entram como
     --e-*, entram aqui, com nome de componente. É a diferença entre um
     degrau da escala e uma medida de peça conferida contra o arquivo.

     Os quatro que mudam no celular são reafinados em styles.css, seção
     BREAKPOINTS, junto com --gutter e a escala de display. */
  --h-capa:         282px;        /* altura da capa */
  --card-gap-capa:  10px;         /* entre a capa e o corpo */
  --card-pad-topo:  var(--e-4);   /* 16 */
  --card-pad-lado:  25px;
  --card-pad-pe:    var(--e-7);   /* 32 */
  --card-gap:       29px;         /* entre chapéu, bloco de texto e botão */
  --card-gap-texto: var(--e-4);   /* 16, entre título e resumo */

  /* ---------- MOVIMENTO ----------
     --ease é a curva do Figma, usada em hover. --suave é mais
     macia e serve para entrada por scroll. */
  --ease:  cubic-bezier(0, 0, .58, 1);
  --suave: cubic-bezier(.22, .9, .28, 1);
  --dur:   .68s;
}