/* ==========================================================================
   TOKENS — a única fonte de verdade visual do PrimeAcademys.
   ==========================================================================
   REGRA: nenhuma cor, tamanho de fonte ou raio literal fora deste arquivo.
   Precisa de um valor que não existe aqui? Adicione AQUI, com nome.

   Por que este arquivo existe antes da terceira página: a primeira página é a
   definição, a segunda copia a primeira, e na terceira já não está claro qual
   das duas é a referência. É assim que nasce uma marca com duas cores quase
   iguais e 26 tamanhos de fonte.

   ---------------------------------------------------------------------------
   IDENTIDADE — "papel e ferrugem" (29/08/2026)
   Tema CLARO, quente, de equipamento de campo. Substituiu o tema escuro
   verde-técnico anterior.

   As cores marcadas (medido) foram extraídas por amostragem da referência
   visual em ~/Downloads/ID Visual de Referencia.jpg. As marcadas (derivado)
   foram calculadas a partir delas para cumprir contraste WCAG AA — o valor
   medido reprovava no papel usado.
   ---------------------------------------------------------------------------

   BREAKPOINTS — três, e só três:
     480px   celular grande
     768px   tablet
     1080px  desktop
   Não crie um quarto porque "quebrou em 880". Conserte dentro dos três.
   ========================================================================== */

:root {
  /* ---- COR: superfície clara ------------------------------------------ */
  /* O papel. Bege quente — é o fundo padrão de toda página.               */
  --c-fundo:          #F1E4D4;   /* papel (medido)                         */
  --c-superficie:     #F7EDE0;   /* cartão, bloco — mais claro que o papel */
  --c-superficie-2:   #E7D9C6;   /* faixa alternada, hover                 */
  --c-linha:          #D8C7B0;   /* bordas e divisórias                    */
  --c-linha-forte:    #B6A592;   /* borda de cartão em destaque (medido)   */

  /* ---- COR: superfície escura ----------------------------------------- */
  /* Para seções invertidas — herói, faixa de prova, rodapé.               */
  --c-escuro:         #181D17;   /* seção escura (medido)                  */
  --c-escuro-2:       #1B1D1C;   /* rodapé (medido)                        */
  --c-oliva:          #2C3224;   /* barra verde-oliva (medido)             */

  /* ---- COR: texto ----------------------------------------------------- */
  --c-texto:          #1F211E;   /* texto principal sobre papel   12.97:1  */
  --c-texto-suave:    #514E42;   /* parágrafo secundário (medido)  6.67:1  */
  --c-texto-fraco:    #6D5F50;   /* legenda, metadado (derivado)   4.93:1  */
  --c-texto-claro:    #F1E4D4;   /* texto sobre escuro            13.68:1  */

  /* ---- COR: ação ------------------------------------------------------ */
  /* Ferrugem. Botão, link, destaque. NUNCA use por estética.              */
  --c-acao:           #9A3A10;   /* sobre papel   (medido)         5.62:1  */
  --c-acao-clara:     #D37045;   /* sobre ESCURO  (derivado)       5.03:1  */
  --c-acao-fundo:     #F6E2D2;   /* fundo de bloco de ação                 */

  /* ---- COR: conversão -------------------------------------------------- */
  /* Verde de compra. NÃO é a cor de ação da marca — a de ação é a ferrugem.
     Existe só nos botões de conversão principais, onde a convenção de
     mercado pesa mais que a coerência da paleta. Usar em mais lugares
     dissolve o efeito e quebra o sistema. Texto sempre branco.            */
  --c-cta-topo:  #178F2E;   /* topo do gradiente     branco 4.20:1        */
  --c-cta:       #127A27;   /* meio — onde fica o texto     5.47:1        */
  --c-cta-base:  #0C6620;   /* base do gradiente            7.15:1        */
  --c-cta-hover: #1A9C33;
  --c-cta-filete:#3FCC5A;   /* fio de luz na borda de cima                */
  --brilho-cta:  rgba(23,143,46,.45);
  --c-cta-texto: #FFFFFF;   /* texto do botão verde — sempre branco      */

  /* ---- COR: estado ---------------------------------------------------- */
  --c-atencao:        #785817;   /* prazo, aviso  (derivado)       5.24:1  */
  --c-atencao-fundo:  #F3E7CC;
  --c-risco:          #842C1F;   /* risco, perda  (derivado)       7.11:1  */
  --c-risco-fundo:    #F5DFD8;
  --c-confirma:       #2C3224;   /* positivo, incluído — o oliva           */

  /* ---- TIPOGRAFIA ----------------------------------------------------- */
  /* Display condensado pesado para chamada; grotesca neutra para leitura. */
  --f-display: "Oswald", "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-titulo:  "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --f-texto:   "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --f-dado:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala fluida. Um degrau por papel — nunca escolha tamanho no olho.    */
  --t-micro:  clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);  /* etiqueta      */
  --t-pequeno:clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);  /* legenda       */
  --t-base:   clamp(1.00rem, 0.96rem + 0.20vw, 1.09rem);  /* corpo         */
  --t-medio:  clamp(1.12rem, 1.05rem + 0.35vw, 1.30rem);  /* lead          */
  --t-h3:     clamp(1.25rem, 1.12rem + 0.65vw, 1.60rem);
  --t-h2:     clamp(1.65rem, 1.35rem + 1.50vw, 2.60rem);
  --t-h1:     clamp(2.15rem, 1.60rem + 2.90vw, 4.20rem);
  --t-numero: clamp(2.40rem, 1.80rem + 3.00vw, 4.00rem);  /* número grande */

  --p-apertado: 1.08;   /* títulos em display condensado */
  --p-normal:   1.65;   /* corpo                         */

  /* ---- ESPAÇO --------------------------------------------------------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4.5rem;
  --e-9: 6.5rem;      /* respiro entre seções no desktop */

  /* ---- FORMA ---------------------------------------------------------- */
  /* Equipamento de campo tem canto vivo. Raio menor que o do tema antigo. */
  --r-pequeno: 2px;
  --r-medio:   4px;
  --r-grande:  8px;
  --r-pilula:  999px;   /* uma grafia só. nunca 9999px, nunca 100px */

  --sombra:      0 1px 2px rgba(31,33,30,.10), 0 12px 32px -20px rgba(31,33,30,.35);
  --sombra-acao: 0 8px 26px -14px rgba(154,58,16,.55);
  --brilho-acao: rgba(154,58,16,.16);   /* halo do heroi */

  /* ---- LARGURA -------------------------------------------------------- */
  --l-texto:   68ch;    /* linha de leitura confortável */
  --l-conteudo: 1140px; /* container padrão             */
  --l-estreito: 820px;  /* conteúdo focado (legal, obrigado) */
  --l-loja:    1360px;  /* catálogo: filtro lateral + grade de 4 colunas */

  /* ---- LOJA (catálogo, 01/10/2026) ------------------------------------- */
  /* Quadro da foto do produto: as fotos vêm de loja, quase todas em fundo
     branco. Num cartão bege elas viravam "adesivo colado"; num quadro claro
     próprio ficam como vitrine de marketplace.                             */
  --c-foto:          #FCF8F2;
  /* Cor de cada loja — só o pontinho ao lado do nome, para reconhecer de
     relance. Nunca em botão nem em fundo (o botão de compra é o verde).    */
  --c-loja-shopee:     #EE4D2D;
  --c-loja-amazon:     #E88A00;
  --c-loja-aliexpress: #C8102E;
  --sombra-modal: 0 24px 64px -24px rgba(24,29,23,.55);
  --c-veu:        rgba(24,29,23,.55);   /* fundo atrás da ficha e do filtro no celular */
}