/* =======================================================================
   GRUPO MÔNACO · Consultoria Financeira / Crédito Consignado
   tokens.css · fundação do sistema (cor, tipo, forma, escala, ornamento, movimento)
   -----------------------------------------------------------------------
   Direção: minimalismo, autoridade, elegância. Papel e onyx carregam 85 a
   90% da superfície; o vermelho é PONTUAÇÃO (palavra-chave, unidade, seta,
   um CTA), nunca parede. Forma RETA por padrão.
   As fontes vêm do <head> (partials/head.html) por <link>, não por import de CSS:
   Termina (kit ezg7xbo, 100 a 900) e Mundial (kit jmi2ice, hoje SÓ 400 e 700).
   Pesos da Mundial (R3 A2): texto corrido 300, rótulo pequeno 500, ênfase 700.
   Sem a Light (300) no kit o navegador usa a 400; quando ela entrar no jmi2ice o
   corpo afina sozinho. Aí rever contraste de --fg-3 e --on-dark-3 em texto
   pequeno: traço fino com cor já justa (4,59:1 e 4,62:1) é o primeiro a sumir.
   Os kits da Adobe são travados por domínio; fora deles cai no system-ui.
   ======================================================================= */

:root {
  /* ===== VERMELHO: o mesmo vermelho em três papéis ======================
     Nenhum tom único passa em todos (medido por pixel em 03/09 e 24/09/2026):
     - interface  #D4161F: texto vermelho e fundo sob texto branco, 5,34:1 no
       branco e 4,94:1 no papel. Para voltar ao do manual e abrir mão do AA,
       é esta linha.
     - manual     #ED2230: logo e peça gráfica. Como texto dá 4,31:1 e reprova.
     - sobre escuro #FF4550: 5,86:1 no onyx e 5,03:1 no card escuro, onde o de
       interface cai para 3,71:1. Branco SOBRE ele reprova (3,38:1): nunca. */
  --monaco-red:        #D4161F;
  --monaco-red-manual: #ED2230;
  --monaco-red-deep:   #A80E17;  /* pressionado */
  --red-on-dark:       #FF4550;
  --red-50:            #FDECEE;  /* lavado sob ícone vermelho (4,68:1 com o de interface) */

  /* ===== SUPERFÍCIE ===================================================== */
  --papel:      #F7F6F4;  /* fundo da página */
  --white:      #FFFFFF;  /* card claro */
  --onyx:       #0A0A0B;  /* dobra escura, texto */
  --onyx-2:     #1C1C20;  /* card escuro */
  --onyx-line:  #2A2A30;  /* fio sobre escuro */
  --fio:        #D9D6D2;  /* fio de 1px sobre papel e branco (ornamento, 1,34:1) */
  --fio-escuro: rgba(255,255,255,.16);

  /* ===== TEXTO (suavizar é COR, nunca opacity) ========================
     Medido sobre #F7F6F4: fg-2 6,23:1 · fg-3 4,59:1 (justo: fora de grade) ·
     fg-4 5,86:1. Sobre onyx: on-dark-2 11,24:1 · on-dark-3 5,38:1 (4,62 no card). */
  --fg-1:      #0A0A0B;
  --fg-2:      #5B5B63;
  --fg-3:      #6E7075;
  --fg-4:      #5F5F67;
  --on-dark-1: #FFFFFF;
  --on-dark-2: #C2C3C7;
  --on-dark-3: #84858B;

  /* ===== FAMÍLIAS ======================================================= */
  --font-display: 'termina', system-ui, sans-serif;  /* títulos, números, marca */
  --font-body:    'mundial', system-ui, sans-serif;  /* texto 300, interface 400, rótulo 500, ênfase 700 */

  /* ===== TÍTULO: três papéis, nunca mais (h1 = h2) =====================
     Termina 400; a palavra-chave (.hl) em 500 e vermelho. Piso de 26px: a 360
     "Resultado de quem" mede 327px em 28px contra 312 de coluna e deixava
     "quem" sozinho na linha; em 26,6px mede 310. */
  --t-dobra: clamp(26px, 2.4vw + 18px, 48px);   /* h1 e h2 de dobra */
  --t-card:  20px;                               /* h3 de card, aba, selo */
  --t-micro: 16px;                               /* h3 de rodapé e faq */
  --t-corpo: 16px;
  --t-lead:  clamp(17px, .4vw + 15.4px, 19px);
  --t-rotulo: 14px;                              /* rótulo e microtexto */

  /* ===== BOTÃO: duas alturas, por min-height (padding-block 0) ========= */
  --btn-h:          52px;
  --btn-h-compacto: 44px;

  /* ===== FORMA ==========================================================
     Reto em tudo. 10 só em fotografia de gente solta (foto dentro de card
     encosta no card e fica reta). 999 só em círculo. */
  --r-reto:    0;
  --r-foto:    10px;
  --r-circulo: 999px;

  /* ===== RITMO (dobra simétrica; três valores com o zero) ============== */
  --dobra-y:       clamp(64px, 7.8vw, 112px);
  --dobra-y-curta: clamp(40px, 3.9vw, 56px);
  --topbar-h: 40px;   /* faixa do topo: altura FIXA, é o deslocamento do sticky */
  --nav-h:    72px;

  /* ===== ORNAMENTO (alpha só aqui) ===================================== */
  --grade-cor:   rgba(212,22,31,.07);   /* grade da arte, passo 40px */
  --grade-passo: 40px;
  --grade-cor-escura: rgba(255,69,80,.10);
  --hachura:     rgba(10,10,11,.10);    /* cabeçalho da grade de convênios */
  --m-tom:       #ECEAE6;               /* M tom sobre tom no papel, 1,11:1 */
  --m-tom-escuro:#1C1C20;               /* palavra-marca no onyx, 1,17:1 */
  --listra:      rgba(255,255,255,.035);/* listras do card escuro, no ângulo do M */

  /* ===== SOMBRA: uma só no sistema (botão flutuante do simulador) ===== */
  --sombra-sim: 0 10px 28px rgba(10,10,11,.22);

  /* ===== MOVIMENTO (só tokens; o JS de entrada é do R3) ================= */
  --ease-expo: cubic-bezier(.16,1,.3,1);
  --dur-1: 180ms;
  --dur-2: 420ms;
  --dur-3: 800ms;
}