/* ==========================================================================
   Tramóia — Design tokens
   Mundo visual: monocromo escuro texturizado, quente. Quase-preto e bege,
   sem preto puro e sem branco puro fora do CTA. Extraído da referência
   pinada pelo Lucas em 09/08/2026 (Downloads/monolog-DESIGN.md).
   ========================================================================== */

/* Dirtyline 36 Days of Type 2022, da Dirtyline Studio. Licença de desktop e
   web com uso comercial permitido; texto em fonts/dirtyline-LICENCA.txt.
   Auto-hospedada de propósito: o site é entregue na conta do cliente e não
   pode depender de CDN de terceiro nem de licença recorrente.
   Uso restrito a momentos de marca: o wordmark e a frase da seção "a
   distância". Não é fonte de texto corrido. */
@font-face {
  font-family: 'Dirtyline';
  src: url('../fonts/dirtyline-36dot.woff2') format('woff2'),
       url('../fonts/dirtyline-36dot.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Cor: campo escuro --------------------------------------------------
     O fundo da página inteira. O card é um degrau acima, e a superfície 300
     é o degrau de item de lista. Nenhum é preto puro. */
  --bg:            #080807;
  --card:          #181715;
  --surface:       #393632;

  /* --- Cor: texto sobre escuro -------------------------------------------- */
  --ink:           #e8e8e3;
  --ink-2:         #ddddd5;
  --ink-3:         #d1d1c7;
  --muted:         #938f8a;

  /* --- Cor: fios e contornos ---------------------------------------------- */
  --line:          #524d47;
  --line-2:        #6b645c;
  --line-soft:     rgba(232, 232, 227, 0.10);
  --line-hair:     rgba(232, 232, 227, 0.16);

  /* Fio pontilhado fino: ponto de 1px a cada 4px. Mais aberto que o `dotted`
     nativo, que fecha demais e à distância vira linha cheia. */
  --rule-dot: repeating-linear-gradient(to right,
              rgba(232, 232, 227, 0.22) 0 1px, transparent 1px 4px);

  /* O mesmo fio na vertical, para separar colunas. */
  --rule-dot-v: repeating-linear-gradient(to bottom,
              rgba(232, 232, 227, 0.22) 0 1px, transparent 1px 4px);

  /* O mesmo fio, para quando a superfície inverte para clara. */
  --rule-dot-dark: repeating-linear-gradient(to right,
              rgba(8, 8, 7, 0.26) 0 1px, transparent 1px 4px);

  /* --- Cor: ação -----------------------------------------------------------
     O único branco puro do sistema, e existe para uma coisa só: a ação
     primária. Se aparecer em texto corrido, a regra foi quebrada. */
  --cta:           #ffffff;
  --on-cta:        #080807;

  /* --- Cor: luz atmosférica ------------------------------------------------
     O gradiente que levanta o campo escuro. Quente, nunca colorido. */
  --glow-warm:     rgba(232, 226, 210, 0.16);
  --glow-edge:     rgba(147, 143, 138, 0.10);

  /* --- Tipografia ----------------------------------------------------------
     Switzer estrutura, Clash Display carrega o momento gigante,
     Spline Sans Mono etiqueta. Substitutas livres de Khteka, Animo e Suisse Mono. */
  --font-sans:    'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Clash Display', 'Switzer', Arial, sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Marca do hero e a frase da seção "a distância". Não é fonte de texto. */
  --font-brand:   'Dirtyline', 'Clash Display', Arial, sans-serif;

  /* Escala. A referência entrega px fixo; aqui vira clamp para que nenhum
     tamanho intermediário precise de breakpoint inventado. */
  /* O wordmark atravessa a largura da tela. 23vw é o fator que faz as sete
     letras de "Tramóia" pararem rente à margem; o teto por altura mora no
     próprio .hero__wordmark, para janela baixa não estourar. */
  --fs-display:   clamp(56px, 23vw, 420px);
  --fs-h2:        clamp(38px, 5.4vw, 69px);
  --fs-h2-sm:     clamp(32px, 4vw, 50px);
  --fs-h3:        clamp(26px, 3vw, 42px);
  --fs-sub:       clamp(19px, 1.9vw, 23.5px);
  --fs-body:      clamp(16px, 1.35vw, 17.5px);
  --fs-label:     clamp(14px, 1.2vw, 15.5px);
  --fs-mono:      11.6px;
  --fs-micro:     10.2px;

  /* Tracking. O sistema inteiro é negativo, e fecha conforme cresce. */
  --tr-display:   -0.03em;
  --tr-head:      -0.03em;
  --tr-sub:       -0.015em;
  --tr-body:      -0.01em;
  --tr-mono:      -0.015em;

  --lh-display:   0.9;
  --lh-head:      1;
  --lh-body:      1.3;
  --lh-read:      1.55;

  /* --- Espaço --------------------------------------------------------------
     Grade base de 8px da referência, com os degraus dela preservados. */
  --sp-1:         7.5px;
  --sp-2:         11.5px;
  --sp-3:         15.5px;
  --sp-4:         24px;
  --sp-5:         38px;
  --sp-6:         72px;
  --sp-7:         142px;

  --sec-sm:       clamp(48px, 6vw, 80px);
  --sec-main:     clamp(64px, 8vw, 112px);
  --sec-lg:       clamp(88px, 11vw, 160px);
  --sec-top:      clamp(112px, 15vw, 224px);

  /* Margem lateral apertada, como na referência: a marca gigante quase encosta
     na borda, e a navbar acompanha a mesma linha. Vale para a página inteira. */
  --pad-x:        clamp(18px, 1.8vw, 30px);
  /* Sem teto: a página inteira trabalha na mesma largura do hero, ou seja,
     de --pad-x a --pad-x. Era 1400px centrados, o que criava um degrau entre
     a marca sangrada do hero e o conteúdo das outras seções. */
  --container:    100%;

  /* Corpo da marca no hero, para navegador sem container queries. O caminho
     bom está em site.css: lá o corpo é calculado a partir da largura
     disponível, e não de uma fração da viewport. */
  --fs-wordmark:  11.4vw;

  /* Largura de "trAmóia.dEsign" em ems, medida em Dirtyline 400 sem tracking:
     6.3604. O denominador leva uma folga mínima para o texto nunca encostar
     em excesso e ser cortado. Trocar a fonte ou o texto obriga a remedir. */
  --wordmark-k:   7.25;

  /* Largura de "Do primEiro oi Ao site no aR" em ems, medida em Dirtyline 400
     no elemento renderizado: 13.7970. As maiúsculas são as formas cursivas e
     pesam mais largura que as minúsculas, por isso a constante subiu. Mesma regra do wordmark: trocar a fonte
     ou o texto obriga a remedir. */
  --processo-k:   13.85;

  /* Largura de "O que consTruo E quanto cuSta" em ems, medida em Dirtyline 400
     no elemento renderizado: 16.4106. */
  --precos-k:     16.48;

  /* Barra alta, como na referência: o respiro do topo é parte da assinatura.
     Encolhe no estreito, onde altura de tela é o recurso escasso. */
  --header-h:     92px;

  /* Canto do botão de ação. Não é pílula: retângulo de canto curto, com um
     ladrilho escuro embutido carregando a seta. */
  --radius-btn:   6px;
  --radius-tile:  4px;

  /* Coluna de rótulo + coluna de conteúdo. Grid editorial recorrente. */
  --grid-editorial: minmax(0, 0.28fr) minmax(0, 1fr);

  /* --- Forma ---------------------------------------------------------------
     Dois raios e nada entre eles: canto quase vivo em superfície,
     pílula total em qualquer coisa clicável. */
  --radius:       2.4px;
  --radius-pill:  1280px;

  /* --- Movimento ----------------------------------------------------------- */
  --ease:         cubic-bezier(.2, .7, .2, 1);
  --ease-out:     cubic-bezier(.16, 1, .3, 1);
  --dur-hover:    .25s;
  --dur-card:     .4s;
  /* A travessia do ladrilho no botão de ação: mais lenta que o hover comum
     de cor, porque é um deslocamento grande (a largura toda do botão) e em
     .25s lia como um pulo, não como um movimento. */
  --dur-slide:    .6s;
}

/* No estreito a barra encolhe: altura de tela é o recurso escasso no celular. */
@media (max-width: 900px) {
  :root { --header-h: 68px; }
}