/* ===========================================================================
   GUIA DA MOBILIDADE — TOKENS
   O único lugar onde valor de design é definido. Nenhum outro arquivo escreve
   cor, tamanho ou espaçamento na mão.

   Trocar o visual do site inteiro = trocar este arquivo. É isto que cumpre a
   decisão do CLAUDE.md: "front substituível, visual separado da lógica".

   DIREÇÃO VISUAL (Fase 12): "Consultório — receita de 21 dias".
     · muito branco e um branco-salvia quase imperceptível como papel;
     · UM azul-petróleo profundo para tudo que é ação (botão, link, barra de
       progresso, foco);
     · UM cobre queimado, usado uma vez por tela, onde há decisão (preço "por",
       "Dia 21", selo de garantia);
     · UM bloco escuro por página (petróleo-noite), o "quadro" do consultório;
     · títulos em serifa humanista (Source Serif 4, auto-hospedada), corpo na
       letra do sistema, grande e sem afetação;
     · nada flutua, nada gira, nada pulsa.

   REGRAS DO PÚBLICO 50+ (não são gosto, são requisito):
     · corpo de 19px (20px a partir de 720px) — abaixo disso a leitura cansa;
     · contraste mínimo WCAG AA (4.5:1 em texto normal, 3:1 em componente);
     · alvo de toque de 52px — dedo não acerta botão de 40px em celular;
     · nada de cinza-claro sobre branco, nem fonte fina.

   MEDIÇÃO: scripts/conferir-contraste.py lê cada `--cor-*: #RRGGBB;` deste
   arquivo (uma por linha, seis dígitos, sem comentário antes do `;`) e mede os
   pares abaixo a cada execução. Cor escrita como rgb()/hsl() some da medição:
   por isso só as sombras e o anel de foco usam rgba — são decorativos.
   =========================================================================== */

:root {
  /* --- COR: texto -------------------------------------------------------- */
  /* Tinta quase preta com fundo de petróleo (não é #000 nem cinza): dá unidade
     com a marca sem parecer "tema". 15.7:1 sobre branco. */
  --cor-texto:          #14262B;
  /* Texto secundário: subtítulo, notas de aula, preço riscado, rodapé.
     Petróleo-acinzentado, nunca cinza puro. 7.9:1 sobre branco. */
  --cor-texto-suave:    #3E5560;
  --cor-texto-invertido:#FFFFFF;

  /* --- COR: superfícies -------------------------------------------------- */
  --cor-fundo:          #FFFFFF;
  /* Fundo do body e das seções alternadas. Branco-salvia: a olho parece
     branco, mas faz o cartão branco "assentar" sem sombra pesada. */
  --cor-fundo-suave:    #F2F6F5;
  /* Caixa de destaque leve: aula atual, aviso informativo, fundo da garantia. */
  --cor-fundo-realce:   #E3EFED;
  /* A borda do campo É o que diz a uma pessoa de 60 anos ONDE digitar.
     A WCAG 1.4.11 exige 3:1 para componente; este dá 3.8:1 sobre branco e
     3.5:1 sobre o branco-salvia — folga de propósito: no limite exato qualquer
     ajuste futuro derrubaria de novo. Petróleo dessaturado em vez de cinza. */
  --cor-borda:          #74868B;
  --cor-borda-forte:    #5C7177;

  /* --- COR: marca -------------------------------------------------------- */
  /* Azul-petróleo: botão principal, links, barra de progresso, foco, ícones
     de linha. 7.7:1 sobre branco, 7.7:1 com texto branco em cima. */
  --cor-primaria:       #0F5C60;
  --cor-primaria-esc:   #0A4346;  /* botão com o dedo em cima; preço do módulo à venda */
  --cor-primaria-clara: #D9EBEA;  /* fundo do botão secundário e da aula atual */

  /* --- COR: acento (cobre queimado) -------------------------------------- */
  /* O ÚNICO quente da paleta. Uma ocorrência por tela, no máximo duas: preço
     "por", "Dia 21 · Reset completo", selo de garantia. 6.0:1 sobre branco.
     ⚠️ PROIBIDO: cobre como texto ou borda dentro do bloco escuro (2.5:1);
     cobre dentro de formulário (vizinho de matiz do vermelho de erro — a
     pessoa leria "preço" como "erro"). */
  --cor-acento:         #A4471F;
  --cor-acento-fundo:   #FBEDE4;  /* fundo do selo de garantia e da marca "Dia 21" */

  /* --- COR: o bloco escuro (um só por página) ---------------------------- */
  /* Petróleo-noite: cartão do método na landing, destaque "continuar" no
     painel, moldura do vídeo na /oferta. Texto branco em cima: 14.9:1. */
  --cor-fundo-escuro:   #0E2B30;
  --cor-fundo-escuro-2: #143C42;  /* superfície um degrau mais clara dentro do escuro */
  /* Texto secundário dentro do escuro. Substitui o "branco a 72%" da
     referência, que reprovava. 11.2:1. */
  --cor-texto-sobre-escuro: #D3E2E3;
  /* Linha e contorno dentro do escuro. 3.65:1 (componente ≥ 3, com folga). */
  --cor-borda-sobre-escuro: #57858B;
  /* ⚠️ PROIBIDO sobre --cor-fundo-escuro: --cor-primaria como texto ou borda
     (1.9:1) e --cor-acento (2.5:1). Dentro do escuro só entram
     --cor-texto-invertido, --cor-texto-sobre-escuro, --cor-primaria-clara
     (barra de progresso, 12.1:1) e --cor-marca-texto (grifo, 12.0:1). */

  /* --- COR: estados ------------------------------------------------------ */
  --cor-sucesso:        #1E7A4E;  /* círculo de aula concluída; 5.3:1 com branco */
  --cor-sucesso-esc:    #135238;  /* texto sobre fundo claro de sucesso */
  --cor-sucesso-fundo:  #E6F3EC;
  --cor-erro:           #B3261E;  /* 6.5:1 sobre branco */
  --cor-erro-esc:       #8C1D18;
  --cor-erro-fundo:     #FDECEA;
  --cor-aviso-esc:      #6B4A00;  /* texto sobre o amarelo abaixo */
  --cor-aviso-fundo:    #FFF6DB;
  --cor-aviso-borda:    #B08200;  /* 3.48:1 — o #C89600 anterior dava 2.69 e reprovava */
  /* O ==grifo== do H1, do subtítulo e do quiz. Deixa de ser amarelo
     fluorescente e vira "grifo de caneta" areia. ⚠️ NUNCA como cor de texto:
     é fundo de marca-texto, só isso (a tinta em cima dá 12.6:1). */
  --cor-marca-texto:    #F5E6B3;

  /* --- TIPOGRAFIA -------------------------------------------------------- */
  /* Corpo: a letra do sistema. Zero download, é a letra que a pessoa já lê no
     celular dela todos os dias; altura-x grande; 400 e 700 em qualquer
     aparelho. */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Títulos: Source Serif 4 (SIL OFL), auto-hospedada em /fontes — sem Google
     Fonts, sem CDN, sem cookie de terceiro. Só H1, H2, preço "por", números
     grandes e a assinatura. H3 e tudo o mais ficam na sans, para a serifa
     continuar rara e, por isso, ter autoridade. O @font-face mora no base.css;
     "Source Serif 4 Reserva" é a Georgia com o tamanho ajustado, para o texto
     não pular quando a woff2 chegar. */
  --fonte-titulo: "Source Serif 4", "Source Serif 4 Reserva", Georgia, "Times New Roman", serif;

  --texto-pequeno: 16px;  /* o MENOR tamanho do site. Nada abaixo disto. */
  --texto-corpo:   19px;  /* 20px a partir de 720px — ver o fim do arquivo */
  --texto-medio:   21px;  /* subtítulo, H3 pequeno, rótulo de campo */
  --texto-grande:  24px;  /* H3 de cartão, título de módulo */
  --texto-titulo:  32px;  /* H2 de seção e H1 das páginas internas */
  --texto-heroi:   36px;  /* H1 da landing e da /oferta no celular (3 linhas em 358px) */
  --texto-heroi-grande: 44px;  /* o mesmo H1 a partir de 720px */
  --texto-preco:   44px;  /* preço "por" no celular; 52px em tela larga */
  --texto-preco-grande: 52px;
  --texto-numero:  40px;  /* "Dia 21" na régua e nas capas das aulas */

  --altura-linha:  1.6;
  --altura-linha-titulo: 1.2;
  --altura-linha-heroi:  1.15;

  --peso-normal:   400;
  --peso-medio:    600;
  --peso-forte:    700;

  /* Chapéu, rótulo de ficha e selo saem em caixa alta espaçada. */
  --espaco-letras-chapeu: .06em;
  --espaco-letras-botao:  .03em;

  /* --- ESPAÇO (escala de 4) --------------------------------------------- */
  --e1:  4px;
  --e2:  8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 20px;
  --e6: 24px;
  --e8: 32px;
  --e10:40px;
  --e12:48px;
  --e16:64px;
  /* Espaço entre seções da página de venda: respiro grande, fluido. */
  --espaco-secao: clamp(48px, 8vw, 96px);

  /* --- FORMA ------------------------------------------------------------- */
  --raio:        12px;   /* botão, campo, aviso */
  --raio-grande: 16px;   /* cartão, caixa, moldura do vídeo */
  --raio-redondo:999px;  /* selo, pílula, barra de progresso */

  /* Sombras tingidas de petróleo, alfa baixo, deslocamento vertical grande.
     Só em cartão que "levanta" (oferta, destaque do painel, barra fixa).
     O cartão comum é desenhado pela BORDA, como papel — não por sombra. */
  --sombra-1: 0 1px 2px rgba(14, 43, 48, .08);
  --sombra-2: 0 12px 32px rgba(14, 43, 48, .10);
  /* Anel de foco do campo: a cor primária a 15%. */
  --anel-foco: 0 0 0 4px rgba(15, 92, 96, .15);
  /* A assinatura visual do site: a linha de 3px petróleo que abre cada seção
     (no lugar da barra-gradiente da referência) e volta no rodapé. */
  --linha-secao: 3px;
  --linha-secao-largura: 64px;
  /* O cabeçalho translúcido com desfoque. Decorativo: fora da medição. */
  --cor-fundo-vidro: rgba(255, 255, 255, .92);
  --desfoque-vidro: 12px;

  /* --- ALVO DE TOQUE ----------------------------------------------------- */
  --alvo-toque:        52px;  /* botão principal */
  --alvo-toque-grande: 56px;  /* botão de comprar, campo de formulário */
  --alvo-toque-menor:  44px;  /* mínimo absoluto, só para links secundários */

  /* --- LARGURAS ---------------------------------------------------------- */
  --largura-leitura: 640px;  /* linha de texto confortável (~34em de 19px) */
  --largura-forma:   440px;  /* formulário e cartão do login */
  --largura-pagina: 1100px;
  --largura-estreita: 720px; /* FAQ, checkout de uma coluna */

  /* --- CANAL DE ATENDIMENTO (F3.15) -------------------------------------- */
  /* NÃO é o verde oficial do WhatsApp (#25D366): com letra branca ele dá 1.98:1,
     e o texto do botão some dentro do próprio botão. Este é o verde escuro da
     mesma marca — o conferidor de contraste mede os dois a cada execução. */
  --cor-whatsapp:     #075E54;
  --cor-whatsapp-esc: #054C43;

  /* --- CAMADAS ------------------------------------------------------------ */
  /* Quem fica por cima de quem. Está AQUI, e não espalhado pelos arquivos,
     porque todos disputam o mesmo canto da tela: se o botão de WhatsApp ficar
     por cima da comemoração de nível, a pessoa toca no botão errado para
     fechá-la.  40 = botão flutuante · 50 = barra do topo · 100 = "pular para o
     conteúdo", que precisa vencer tudo para o teclado funcionar. */
  --z-flutuante: 40;
  --z-topo: 50;
  --z-pular: 100;

  /* --- MOVIMENTO --------------------------------------------------------- */
  /* Três microinterações no site inteiro: entrada suave por rolagem, barra
     que enche, contador. Nada pulsa, nada gira. */
  --transicao: 150ms ease-out;
  --transicao-entrada: 450ms cubic-bezier(.4, 0, .2, 1);
  --transicao-barra: 800ms ease-out;
}

/* Corpo de 20px a partir de 720px. Fica AQUI, e não no base.css, porque o
   acessibilidade.css copia --texto-corpo do :root para escalar a letra: se o
   20px morasse em outro elemento, a escala grande ficaria em 19px × 1,15. */
@media (min-width: 720px) {
  :root {
    --texto-corpo: 20px;
    --texto-heroi: var(--texto-heroi-grande);
    --texto-preco: var(--texto-preco-grande);
  }
}

/* Quem pediu menos movimento no sistema operacional não recebe animação. */
@media (prefers-reduced-motion: reduce) {
  :root { --transicao: 0ms; --transicao-entrada: 0ms; --transicao-barra: 0ms; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}