/* Tokens do Cresce Comigo — o arquivo unico da REGRA DE OURO.
 *
 * Landing, area de assinante, e-mail e PDF leem daqui. Nenhum outro arquivo
 * escreve cor, fonte, raio ou espaco direto: tudo referencia var().
 *
 * Os valores de cor e raio vem de brief/identidade-visual.md. A escala de texto
 * foi ABERTA em relacao ao brief (32/24) na iteracao visual: 40 no celular e 72
 * acima de 900px, porque 32 nao lia como hero e 32 contra 24 nao criava
 * hierarquia nenhuma. Se o brief for a fonte da verdade, e ele que precisa
 * subir junto — nao este arquivo voltar.
 */

:root {
  /* --- Cor: papel e tinta ------------------------------------------------ */
  --papel: #FDFDFB;        /* fundo principal */
  --papel-fundo: #F2F3EF;  /* secoes alternadas, cards */
  --tinta: #1C1B24;        /* texto principal */
  --tinta-suave: #5C5B6B;  /* texto secundario, legenda */
  --traco: #E3E4DE;        /* bordas, divisorias */

  /* --- Cor: as faixas etarias -------------------------------------------- *
   * Cada faixa tem a cor dela em toda a interface — a mae aprende a
   * reconhecer a cor do filho. So aparecem quando o contexto e de faixa.     */
  --faixa-1-2: #23C4A6;    /* menta */
  --faixa-2-3: #FFC93C;    /* sol */
  --faixa-3-4: #6C4FE0;    /* uva */
  --faixa-4-5: #FF8A3D;    /* tangerina */

  /* A tinta que fica legivel EM CIMA de cada faixa. Sol e menta sao claras
   * demais para texto branco; uva e escura demais para texto preto. Sem estes
   * quatro, o rotulo da faixa vira o ponto de menor contraste da pagina. */
  --faixa-1-2-texto: var(--tinta);
  --faixa-2-3-texto: var(--tinta);
  --faixa-3-4-texto: var(--papel);
  --faixa-4-5-texto: var(--tinta);

  /* Uva e a cor institucional: botao principal, logo, links. Alias proprio
   * porque esses elementos NAO sao sobre faixa etaria — usar var(--faixa-3-4)
   * num botao daria a cor certa pelo motivo errado, e quebraria na hora em que
   * a paleta das faixas mudar. */
  --institucional: var(--faixa-3-4);
  --institucional-texto: var(--faixa-3-4-texto);

  /* --- Cor: reservada ---------------------------------------------------- *
   * Carmim e SO para `atencao` e para o bloqueio por idade. Nao aparece em
   * nenhum outro lugar. Quando a mae vir carmim, ela precisa saber que e sobre
   * seguranca, sem ler. Carmim e tangerina nunca ficam lado a lado — por isso
   * o aviso da regua vai sempre sobre papel, nunca direto sobre a faixa.      */
  --alerta: #C41E3A;
  --alerta-texto: var(--papel);

  /* --- Tipografia -------------------------------------------------------- *
   * As familias sao servidas por site/fontes/fontes.css, que so declara as
   * @font-face. As pilhas moram aqui, com o resto dos tokens.
   * Nunca serif no fallback: o texto piscaria de Georgia para Figtree e a
   * pagina refluiria inteira na frente da mae.                                */
  --fonte-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-corpo: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* --- Escala de texto (mobile primeiro) --------------------------------- *
   * Corpo em 17px, nao 16: mae le no celular com uma mao so e a crianca
   * puxando a outra. Os degraus sao largos de proposito — quando hero e secao
   * ficam perto, nada na pagina parece importante.                            */
  --t-hero-tam: 40px;
  --t-hero-peso: 700;
  --t-hero-espaco: -0.03em;
  --t-hero-altura: 1.05;

  --t-secao-tam: 26px;
  --t-secao-peso: 700;
  --t-secao-espaco: -0.02em;

  --t-atividade-tam: 19px;
  --t-atividade-peso: 600;

  --t-corpo-tam: 17px;
  --t-corpo-peso: 400;
  --t-corpo-altura: 1.6;

  --t-legenda-tam: 14px;
  --t-legenda-peso: 400;

  --t-rotulo-tam: 12px;
  --t-rotulo-peso: 600;
  --t-rotulo-espaco: 0.08em;
  --t-rotulo-caixa: uppercase;

  /* Numero grande de preco e de regua — display, nunca corpo. */
  --t-numero-tam: 44px;

  /* --- Raio -------------------------------------------------------------- */
  --raio-card: 14px;
  --raio-botao: 12px;
  --raio-pill: 999px;      /* so em selo e etiqueta de faixa */

  /* --- Espaco ------------------------------------------------------------ *
   * O brief nao define escala de espacamento. Esta e uma adicao: base 4px,
   * que e o que a escala de texto ja usa implicitamente.                      */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;
  --espaco-8: 64px;
  --espaco-9: 96px;
  --espaco-10: 128px;

  /* --- Medida ------------------------------------------------------------ */
  --largura-pagina: 720px;
  /* Medida de leitura, mirando 65 caracteres por linha.
   *
   * Nao da para cravar 65: a unidade ch e a largura do "0", mais larga que a
   * letra media, e quantos caracteres cabem depende de QUAIS caracteres sao —
   * uma frase cheia de "i", virgula e espaco cabe muito mais que uma de "m".
   * Medido nesta pagina, 59ch entrega de 47 a 72 caracteres por linha, media
   * perto de 60. 65ch, que e o idiomatico, empurrava o pior caso para 78.
   * Para cravar 65 no pior caso seriam ~52ch, e ai o resto do texto fica
   * estreito demais. Se trocar a fonte de corpo, remedir. */
  --largura-texto: 59ch;
  --borda: 1px;            /* elevacao e borda de 1px em --traco, nunca sombra */

  /* --- Regua de crescimento ---------------------------------------------- *
   * O elemento assinatura tem token proprio porque a altura do trilho e o
   * tamanho do marcador precisam bater entre CSS e o calculo de posicao.      */
  --regua-marcador: 52px;
  --regua-trilho: 32px;
  --regua-pista: 132px;
  /* Folga de papel em cima e embaixo de cada banda. E ela que faz a banda ser
   * uma pastilha sobre a prateleira, e nao um trecho pintado do trilho — sem
   * essa folga, a banda da faixa ATIVA fica encostada na borda do trilho e,
   * como o fundo da secao e exatamente a mesma cor, vira um furo. */
  --regua-faixa-folga: var(--espaco-2);
  --regua-faixa-folga-ativa: var(--espaco-1);
  /* Respiro nas pontas do trilho. Somado ao recuo interno de meio marcador, e a
   * folga entre a marca do ano 1 (ou do 5) e a borda da viewport: nunca menos
   * de 24px em largura nenhuma. */
  --regua-respiro: var(--espaco-5);
}

/* Movimento: revelacao suave e transicao de estado, nada alem disso. */
:root {
  --transicao: 180ms ease;
  --transicao-marcador: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transicao-fundo: 420ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transicao: 0ms;
    --transicao-marcador: 0ms;
    --transicao-fundo: 0ms;
  }
}

/* --- Degraus de tela --------------------------------------------------------
 * A pagina cresce em tres saltos. Acima de 900px ela deixa de ser uma coluna
 * estreita no meio do monitor: a medida de LEITURA continua em 65ch, mas o
 * container abre para caber duas colunas de verdade.                          */

@media (min-width: 640px) {
  :root {
    --t-hero-tam: 52px;
    --t-secao-tam: 32px;
    --t-numero-tam: 52px;
  }
}

@media (min-width: 900px) {
  :root {
    --t-hero-tam: 72px;
    --t-secao-tam: 40px;
    --t-numero-tam: 64px;
    --largura-pagina: 1080px;
    --regua-marcador: 64px;
    --regua-trilho: 42px;
    --regua-pista: 180px;
    --regua-respiro: var(--espaco-7);
  }
}

@media (min-width: 1280px) {
  :root { --largura-pagina: 1180px; }
}