/*
  Tokens base do motor de sites da Kanami (templates/sites/MOTOR.md, seção 4).

  É o ESQUELETO comum: igual em todo site. A camada de identidade do cliente
  sobrescreve só as cores (--base-*), as faces (--face-*) e, se quiser
  personalidade, uma terceira curva. Nada aqui é cor de marca.

  De onde veio: escala, entrelinha e curvas medidas no walk.productions
  (10/09/2026); a mesma curva dura aparece no L'Lipar como --ease-hop, sinal de
  que é o esqueleto do estúdio, não gosto de um site.
*/

:root {
  /* --- grade: até a borda (regra 1) ---------------------------------------- */
  --gutter: clamp(20px, 4vw, 40px);   /* recuo lateral: 40px a 1440 */
  --colunas: 12;
  --gap-col: clamp(12px, 1.6vw, 24px);
  --texto-max: 65ch;                  /* coluna estreita só pra texto corrido */

  /* --- escala modular 1,28 --------------------------------------------------- */
  --t--1: .78rem;
  --t-0: 1rem;
  --t-1: 1.28rem;
  --t-2: 1.64rem;
  --t-3: 2.1rem;
  --t-4: 2.68rem;
  --t-5: 3.44rem;
  --t-6: 4.4rem;
  --t-7: 5.63rem;
  --t-8: 7.2rem;
  /* o tipo "de parede" da regra 2: pelo menos um por página */
  --t-parede: clamp(4.5rem, 13vw, 11rem);

  /* --- entrelinha e espaçamento ---------------------------------------------- */
  /* Abaixo de .95, conferir acento em caixa alta no celular: no OrtoDoctor a
     linha de cima encostou na de baixo. */
  --lh-display: .9;
  --lh-titulo: 1.05;
  --lh-corpo: 1.55;
  --lh-rotulo: 1.6;
  --tk-display: -.02em;
  --tk-rotulo: .14em;

  /* --- as duas curvas -------------------------------------------------------- */
  --curva: cubic-bezier(.16, 1, .3, 1);      /* entrar: desacelera longo */
  --curva-dura: cubic-bezier(.9, 0, .1, 1);  /* trocar de estado: corte seco */
  --dur-curta: .35s;
  --dur: .7s;
  --dur-longa: 1.1s;

  /* --- cor: 7 degraus neutros; a identidade renomeia no vocabulário do cliente */
  --base-100: #f4f2ed;
  --base-200: #e6e3dc;
  --base-300: #c9c5bc;
  --base-400: #8f8b83;
  --base-500: #55524c;
  --base-600: #26241f;
  --base-700: #121110;
  --fundo: var(--base-100);
  --tinta: var(--base-700);
  --tinta-2: var(--base-500);
  --linha: var(--base-200);
  --acento: var(--base-700);       /* orçamento: 2 aparições em título (regra 6) */

  /* --- faces: display, texto, rótulo ----------------------------------------- */
  --face-display: system-ui, sans-serif;
  --face-texto: system-ui, sans-serif;
  --face-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-curta: 0s; --dur: 0s; --dur-longa: 0s; }
}