/* ==========================================================================
   Unasse — TOKENS
   Fonte: BRIEF-ARTE-A17.md (HOKUSAI, 08/09/2026) §1.3, §2.2, §2.3, §3, §5.2, §6.
   Geometria do Canto: MANUAL-ASSINATURA.md (intocável) — chanfro 2:1, y=h/6, r=h/4.
   Nada aqui é invenção da implementação: todo número tem origem declarada.
   Degraus: base (<600) · md (>=600) · lg (>=960) · xl (>=1440, SÓ layout).
   ========================================================================== */

:root{

  /* ---- COR · superfícies (§3.1) ------------------------------------ */
  --marinho-profundo:#101A2E;
  --marinho:#16233F;                 /* marca */
  --papel:#F7F5F0;                   /* marca */
  --papel-recuado:#EFEBE3;
  --verde:#1DBF9F;                   /* marca — NUNCA como texto sobre papel */
  --verde-pressionado:#19AD90;

  /* ---- COR · texto e linhas (§3.2) --------------------------------- */
  --txt-claro:#16233F;               /* 14,32:1 sobre --papel        (AAA) */
  --txt2-claro:#485166;              /*  7,29:1 sobre --papel        (AAA) */
  --txt-escuro:#F7F5F0;              /* 14,32:1 sobre --marinho      (AAA) */
  --txt2-escuro:#C8C5BE;             /*  9,05:1 sobre --marinho      (AAA) */
  --linha-sutil-claro:rgba(22,35,63,.14);
  --linha-sutil-escuro:rgba(247,245,240,.16);
  /* 03/10: --linha-ui-claro (#838A9B, 3,17:1) saiu com o card de pilar, seu único
     consumidor; volta quando um componente de UI sobre papel precisar de borda */
  --linha-ui-escuro:#8F98AB;

  /* ---- ESPAÇAMENTO · base 4px, 13 degraus (§2.2) ------------------- */
  --e-4:4px;    --e-8:8px;    --e-12:12px;  --e-16:16px;  --e-24:24px;
  --e-32:32px;  --e-40:40px;  --e-48:48px;  --e-64:64px;  --e-80:80px;
  --e-96:96px;  --e-128:128px; --e-160:160px;

  /* ---- GRID (§2.1) -------------------------------------------------- */
  --gutter:16px;                     /* gutter = margem externa */
  --container-max:1400px;
  --colunas:12;
  --alvo-toque:44px;
  --altura-cabecalho:60px;

  /* ---- RITMO VERTICAL (§2.3) ---------------------------------------- */
  --ritmo-secao:var(--e-64);
  --ritmo-cabecalho-secao:var(--e-32);
  --ritmo-bloco:var(--e-24);
  --gap-grade:var(--e-16);
  --gap-empilhado:var(--e-24);

  /* ---- CANTO · escalas (§5.2) --------------------------------------- */
  /* XL — travessia de capítulo */
  /* XL não tem raio: a travessia é FRONTEIRA e leva só o chanfro (§5.2-A). */
  --canto-xl-y:56px;  --canto-xl-x:112px;
  /* L — contêiner do hero e CardOferta (§11.3 do brief, pós-render).
     60/120/90 deixava o chanfro do hero em h/15,4 contra o h/6 do manual.
     Base fica em 52/104/78 pelo teto nº2 da §5.2 (chanfro-x <= 1/3 da largura):
     a 360px o contêiner tem 328px úteis, 1/3 = 109px. r = 1,5·y, 2:1 sempre. */
  --canto-l-y:52px;   --canto-l-x:104px;   --canto-l-r:78px;
  /* M — a escala existe no sistema (§5.2) mas NENHUMA peça da home a usa
     desde que o card de destaque perdeu o Canto (§11.2). Token sem consumidor
     é o começo do design system em que ninguém confia: sai daqui e volta no
     dia em que houver peça. A proporção continua registrada no brief. */
  /* S — botão */
  --canto-s-y:10px;   --canto-s-x:20px;    --canto-s-r:14px;
  /* raio neutro de tudo que NÃO é Canto (§5.4 nº5) */
  --raio-neutro:12px;

  /* ---- RÉGUA DIAGONAL 2:1 — a citação em miniatura (§5.5) ------------ */
  --regua-comp:54px;                 /* catetos 48 x 24 */
  --regua-esp:3px;
  --regua-mini-comp:11px;            /* catetos 10 x 5 */
  --regua-mini-esp:2px;
  --regua-angulo:-26.565deg;         /* atan(1/2) */

  /* ---- MOTION (§6.1, §6.2) ------------------------------------------ */
  --ease-unasse:cubic-bezier(.16,1,.3,1);
  --ease-sistema:cubic-bezier(.4,0,.2,1);
  --ease-saida:cubic-bezier(.4,0,1,1);
  --d-instante:120ms;
  --d-ui:200ms;
  --d-transicao:300ms;
  --d-modal:320ms;
  --d-revelacao:420ms;               /* teto absoluto do sistema */
  --stagger:80ms;

  /* ---- TIPOGRAFIA · 11 tokens compostos, degrau BASE (§1.3) ----------
     São onze e continuam sendo onze, mas não são os mesmos onze do brief
     original: o papel `display` foi aposentado (nunca teve consumidor, §11.9)
     e o `h4` entrou no lugar (§11.4), que é o degrau que faltava entre o nome
     do pilar e o nome da frente.
     Pesos: 500 corpo · 800 títulos e UI · 900 SÓ o h1. 600/700 não existem.
     O wordmark também é 900 e NÃO conta nesta regra: é logo, governado pelo
     MANUAL-ASSINATURA, com tamanho e tracking próprios fora da escala (§11.5).
     -------------------------------------------------------------------- */
  --fs-h1:1.875rem;       --lh-h1:1.12;       --ls-h1:-.028em;
  --fs-h2:1.5rem;         --lh-h2:1.15;       --ls-h2:-.024em;
  --fs-h3:1.25rem;        --lh-h3:1.25;       --ls-h3:-.020em;
  /* h4 — o degrau que faltava. O brief de conteúdo aninha seção > pilar >
     frente; sem ele, as 12 frentes herdavam o peso do pilar e a cobertura
     lia como cardápio de 12 (§11.4). */
  --fs-h4:1.0625rem;      --lh-h4:1.30;       --ls-h4:-.012em;
  --fs-sub:1.125rem;      --lh-sub:1.45;      --ls-sub:-.012em;
  --fs-corpo-g:1.0625rem; --lh-corpo-g:1.55;
  --fs-corpo:1rem;        --lh-corpo:1.62;
  --fs-micro:.875rem;     --lh-micro:1.45;    --ls-micro:.010em;
  --fs-legenda:.75rem;    --lh-legenda:1.40;  --ls-legenda:.015em;
  --fs-botao:1rem;        --lh-botao:1;       --ls-botao:.005em;
  --fs-eyebrow:.75rem;    --lh-eyebrow:1.30;  --ls-eyebrow:.100em;

  /* medida (§2.4) — obrigatória em todo bloco de texto corrido */
  --m-h1:24ch;  --m-h2:18ch;  --m-h3:26ch;  --m-h4:34ch;
  --m-sub:48ch;     --m-corpo-g:56ch; --m-corpo:62ch;
  --m-micro:40ch;   --m-legenda:44ch;
}

/* ============================ md — >= 600px ============================= */
@media (min-width:600px){
  :root{
    --ritmo-secao:var(--e-96);
    --ritmo-cabecalho-secao:var(--e-40);
    --altura-cabecalho:68px;

    --canto-xl-y:80px;  --canto-xl-x:160px;
    --canto-l-y:80px;   --canto-l-x:160px;   --canto-l-r:120px;

    --fs-h1:2.875rem;       --lh-h1:1.08;
    --fs-h2:2rem;           --lh-h2:1.12;
    --fs-h3:1.4375rem;      --lh-h3:1.22;
    --fs-h4:1.125rem;       --lh-h4:1.28;
    --fs-sub:1.25rem;       --lh-sub:1.42;
    --fs-corpo-g:1.125rem;
  }
}

/* ============================ lg — >= 960px ============================= */
@media (min-width:960px){
  :root{
    --gutter:20px;
    --gap-grade:20px;
    --gap-empilhado:var(--e-32);
    --ritmo-secao:var(--e-128);
    --ritmo-cabecalho-secao:var(--e-48);
    --ritmo-bloco:var(--e-32);
    --altura-cabecalho:76px;

    --canto-xl-y:120px; --canto-xl-x:240px;
    /* L fica abaixo do XL de propósito: a fronteira tem de continuar sendo
       o maior Canto da página (§4.2 nº4). */
    --canto-l-y:100px;  --canto-l-x:200px;  --canto-l-r:150px;

    --fs-h1:4.125rem;       --lh-h1:1.05;
    --fs-h2:2.625rem;       --lh-h2:1.10;
    --fs-h3:1.625rem;       --lh-h3:1.20;
    --fs-h4:1.25rem;        --lh-h4:1.25;
    --fs-sub:1.4375rem;     --lh-sub:1.40;
    --fs-corpo-g:1.1875rem;
    --fs-corpo:1.0625rem;
    --fs-micro:.9375rem;
    --fs-legenda:.8125rem;
    --fs-botao:1.0625rem;
    --fs-eyebrow:.8125rem;
  }
}

/* ====================== xl — >= 1440px · SÓ LAYOUT ====================== */
/* A tipografia NÃO cresce aqui (§1.2). Só ritmo e margem. */
@media (min-width:1440px){
  :root{
    --ritmo-secao:var(--e-160);
  }
}