/*
Valores extraidos por amostragem de pixel dos exports @2x em refs/
(scripts/extract_tokens.py), nao estimados visualmente. Convertidos para @1x
(export / 2, ja que os frames do Figma sao de 1280px de largura).

Confirmado nos 3 exports (home/article/curriculum): a coluna .main comeca
em x=348px e termina em x=931.5px em TODAS as telas, sem variar — ou seja,
o "main sempre centralizado, largura fixa" do instrucoes_portifolio.md e
literal, nao aproximado.
*/
:root {
  /* cores (RGB exatos amostrados; sao provavelmente preto em varias opacidades
     sobre o fundo, mas fixamos como hex resultante) */
  /* branch novembro: fundo #fdfdfd. Com o fundo cinza o card
     precisa de uma cor propria de superficie para se destacar dele — dai
     --color-surface. */
  --color-bg: #fdfdfd;
  --color-surface: #ffffff;   /* superficie elevada: card do Acervo */
  --color-ink: #363636;       /* texto principal */
  --color-ink-muted: #999999;  /* texto secundario / meta */
  --color-border: #d9d9d9;    /* contorno de placeholders (galeria, imagem do artigo) */
  --color-border-soft: #e4e4e3; /* divisores mais sutis */
  --color-divider: #dddddd;   /* linha divisoria da referencia, amostrada */
  --color-link: #0099ff;

  /* Sombra do card, derivada por amostragem do exemplo (scan de pixel ao
     redor do mockup): a queda de luminancia vai de ~22 niveis colada na
     base a 0 ~58px abaixo dela, e de ~15 niveis nas laterais — ou seja,
     sombra deslocada para baixo, difusa e de opacidade baixa. Dois passos:
     um curto que assenta a borda e um longo que faz o halo.
     O spread negativo existe para a sombra nao subir acima do card: uma
     sombra de blur B sobe B/2 alem da borda, entao o topo dela fica em
     (deslocamento - B/2 + spread) — os valores abaixo zeram essa conta. */
  --shadow-card: 0 2px 4px -1px rgba(0, 0, 0, 0.04),
                 0 12px 40px -8px rgba(0, 0, 0, 0.08);

  /* coluna principal — medido, identico nas 3 telas */
  --main-width: 584px;       /* 583.5px medido */

  /* nao medido com precisao de pixel (elementos vazios/placeholder no mock);
     valores razoaveis, ajustar depois se necessario */
  --gallery-gutter: 24px;
  --radius: 8px;

  /* Distancia da borda do card ate o conteudo dele (padding de .card-content). */
  --card-padding: 12px;

  /* Raio dos elementos dentro do card (video e player). Valor escolhido, nao
     derivado de --radius: a conta do raio concentrico foi abandonada. */
  --radius-inner: 4px;

  --font-body: "SF Pro", -apple-system, system-ui, sans-serif;

  /* Escala tipografica, ancorada no corpo de 14px.
     Cinco degraus, cada um com uma funcao — nenhum tamanho solto fora daqui.
     Os degraus acima do corpo foram mantidos onde estavam: com o corpo caindo
     de 16 para 14, o contraste dos titulos sobe sozinho (20/14 = 1,43 e
     24/14 = 1,71), que e uma hierarquia mais saudavel que a anterior.
     Obs.: 14 e o unico valor fora da escala de 4 — foi a ancora pedida. */
  --text-meta: 12px;    /* rotulos de secao, datas, bullets, badge, legenda */
  --text-body: 14px;    /* corpo, links, descricoes, labels do curriculo */
  --text-strong: 16px;  /* setas do carrossel */
  --text-title: 20px;   /* h1 do nome (home e curriculo) */
  --text-display: 24px; /* h1 do artigo */
}

/* Modo de texto grande (acessibilidade, tarefa 29): sobe um degrau inteiro
   na mesma escada de 4px, em vez de multiplicar por um fator solto — o
   corpo (14px) sobe para 18px, a mesma excecao fora da escala de 4 que ja
   era hoje. +-29% no corpo, dentro da faixa que a WCAG e a literatura de
   acessibilidade recomendam para um botao de "texto grande" de um clique
   (a 1.4.4 garante ate 200% via zoom do navegador; isso aqui e complementar,
   nao substitui). A classe entra no <html> via js/text-scale.js. */
html.text-large {
  --text-meta: 16px;
  --text-body: 18px;
  --text-strong: 20px;
  --text-title: 24px;
  --text-display: 28px;
}