/* =============================================================================
   MOTHUS · TOKENS — a fonte única de cor, tipo, medida e movimento da marca.
   Extraído do site em produção (entregaveis/site/_build/00-tokens.css), 16/09/2026.

   TRÊS CAMADAS, e a ordem não se inverte:
     1. PRIMITIVO  — o valor cru. Só aqui mora hex.
     2. SEMÂNTICO  — o papel. É isto que a peça e a tela consomem.
     3. COMPONENTE — o ajuste local, quando o papel não basta.

   🔴 Nenhum componente usa primitivo direto. Se precisou, falta um semântico.
   ========================================================================== */

:root{
  /* ---------- 1. PRIMITIVO ---------- */
  /* verdes — amostrados do logotipo */
  --mo-verde-900:#06301d;  /* verde noite   */
  --mo-verde-800:#063f28;  /* verde escuro  */
  --mo-verde-600:#0f7350;  /* verde médio   */
  --mo-verde-500:#0b6e44;  /* VERDE DA MARCA — o do logotipo. 5,79:1 no creme */
  --mo-verde-400:#32ae70;  /* acento        */
  --mo-verde-200:#b2d6a8;  /* verde claro   */

  /* ⚠️ APOSENTADO em 17/09/2026 por decisão do Nathan: o site nasceu com #0d7a4d como --verde. Ele dá 4,93:1 no creme,
     contra 5,79:1 do verde do logotipo, e são duas cores a 2% de distância —
     ninguém enxerga a diferença, todo mundo erra qual usar. Decisão registrada
     no MANUAL, seção 13. O site JA foi remontado com #0b6e44. Este alias fica só como registro do que
     foi aposentado. NÃO usar em peça nova, tela nova nem e-mail. */
  --mo-verde-legado:#0d7a4d;

  /* neutros — creme quente, nunca cinza puro */
  --mo-creme:#f7f5f1;
  --mo-branco:#ffffff;
  --mo-tinta:#12281d;      /* preto esverdeado: o neutro é da família do verde */
  --mo-tinta-2:#4a6157;
  --mo-linha:#e2ded7;
  --mo-aco:#888884;

  /* ---------- 2. SEMÂNTICO ---------- */
  /* superfície */
  --mo-sup:var(--mo-creme);           /* o chão padrão. 65% de tudo.         */
  --mo-sup-2:var(--mo-branco);        /* cartão sobre o chão                 */
  --mo-sup-ancora:var(--mo-verde-800);/* o bloco cheio. Chapado, sem degradê */
  --mo-sup-noite:var(--mo-verde-900); /* quando o âncora encosta em foto escura */

  /* texto sobre superfície clara */
  --mo-texto:var(--mo-tinta);         /* 14,32:1 */
  --mo-texto-2:var(--mo-tinta-2);     /*  6,14:1 */
  --mo-texto-3:var(--mo-aco);         /*  3,27:1 — só legenda ≥18,7px ou ≥14px/700 */
  --mo-chave:var(--mo-verde-500);     /*  5,79:1 — a palavra-chave do título */
  --mo-rotulo:var(--mo-verde-500);    /*  o olho, caixa alta, tracking .18em */

  /* texto sobre superfície escura */
  --mo-texto-inv:var(--mo-creme);     /* 11,02:1 no âncora */
  --mo-texto-2-inv:var(--mo-verde-200);/* 7,48:1 no âncora */
  --mo-chave-inv:var(--mo-verde-400); /*  4,24:1 — só ≥18,7px/700. É título, não corpo */

  /* ação */
  --mo-btn-sup:var(--mo-verde-400);
  --mo-btn-texto:var(--mo-verde-900); /* 5,13:1 — o par que passa AA em 14,5px */
  --mo-pilula-sup:var(--mo-verde-600);
  --mo-pilula-texto:var(--mo-branco); /* 5,85:1 */

  /* estrutura */
  --mo-borda:var(--mo-linha);
  --mo-fio:var(--mo-verde-400);       /* o fio do frio: 6px, atravessa a peça */
  --mo-grade:var(--mo-linha);         /* a grade do palete, sobre claro */
  --mo-grade-escura:var(--mo-verde-900); /* a mesma grade, sobre o âncora */

  /* ---------- TIPO ---------- */
  --mo-sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mo-serif:"Newsreader",Georgia,"Times New Roman",serif;
  /* 🔴 duas famílias. Uma terceira só entra com decisão registrada. */

  --mo-peso-corpo:450;
  --mo-peso-medio:500;
  --mo-peso-forte:650;
  --mo-peso-chave:800;   /* ExtraBold: só na palavra-chave da peça */

  /* ---------- MEDIDA ---------- */
  --mo-container:82rem;
  --mo-pad-x:clamp(1.25rem,4vw,2rem);
  --mo-sec:clamp(4rem,9vh,7.5rem);
  --mo-r-sm:10px; --mo-r-md:12px; --mo-r-lg:16px; --mo-r-xl:1.5rem;
  --mo-r-foto:34px;          /* o canto do cartão de foto, web e peça */
  --mo-r-pill:999px;

  /* ---------- SOMBRA — três degraus e só três ---------- */
  --mo-sombra:color-mix(in srgb, var(--mo-tinta) 17%, transparent);
  --mo-sh-chip:0 12px 28px var(--mo-sombra);
  --mo-sh-card:0 18px 44px var(--mo-sombra);
  --mo-sh-painel:0 30px 70px var(--mo-sombra);

  /* ---------- MOVIMENTO ---------- */
  --mo-ease:cubic-bezier(.4,0,.2,1);
  --mo-easeOut:cubic-bezier(0,0,.58,1);
  --mo-t-micro:180ms;  /* resposta de toque   */
  --mo-t-ui:300ms;     /* troca de estado     */
  --mo-t-entra:700ms;  /* entrada de bloco    */
}

/* ---------- 3. COMPONENTE ---------- */
:root{
  --mo-btn-pad:.9rem 1.6rem;
  --mo-btn-fs:14.5px;
  --mo-olho-fs:12px;
  --mo-olho-track:.18em;
  --mo-lede-max:54ch;
}