/* Lutrix Digital: os tokens do site. Tudo o que vem depois usa só estas variáveis.
   Direção: "Type and nothing else" (seed 1615473608), tipo Switzer, paleta monocromática (preto, branco e cinzas). */

:root {
  /* Cor: monocromática, a pedido de Gustavo Vitor ("as partes pretas e brancas ficaram razoáveis, as outras
     cores estragaram"). Preto, branco e cinzas; capítulos inteiros em preto. */
  --bg: #ffffff;          /* o chão da página */
  --surface: #f2f2f2;     /* um degrau de tom: o segundo chão e o fundo das demonstrações */
  --surface-2: #e4e4e4;   /* o terceiro degrau, só dentro das demonstrações (data-ui) */
  --ink: #0a0a0a;         /* todo o texto corrido */
  --muted: #5f5f5f;       /* notas secundárias (contraste 6,4:1 no branco) */
  --accent: #0a0a0a;      /* a ação: o botão preto no branco */
  --accent-ink: #ffffff;
  --field: #0a0a0a;       /* o campo preto */
  --field-ink: #ffffff;   /* o texto sobre o campo preto */
  --field-muted: #9a9a9a; /* nota secundária no preto (contraste 7,4:1) */

  /* Tipo: uma família só, Switzer. Cinco tamanhos na página, e nenhum a mais. */
  --font: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);   /* 13–14px: notas, créditos */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);     /* 17–19px: texto corrido */
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);       /* 20–26px: abertura, frases de apoio */
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);              /* 32–64px: títulos de seção, a lista */
  /* entre o título da seção (head) e o texto grande (lead): títulos dos casos e as capacidades */
  --step-sub: clamp(1.625rem, 1.15rem + 1.6vw, 2.75rem);
  --step-display: clamp(2.5rem, 0.4rem + 9.2vw, 8rem);      /* o tamanho enorme: abertura, campos, fechamento (15 caracteres cabem em 390px) */

  --display-weight: 600;
  --display-tracking: -0.04em;
  --display-leading: 0.95;
  --text-leading: 1.5;
  --text-tracking: -0.005em;

  /* Espaço: um par de margens na página inteira */
  /* 20–32px; em telas mais largas que 1440px, a margem cresce e o conteúdo fica numa coluna centralizada */
  --margin: max(clamp(1.25rem, 0.8rem + 1.6vw, 2rem), calc((100vw - 1440px) / 2 + 2rem));
  --gutter: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
  /* do título de uma seção ao conteúdo dela, e do conteúdo ao convite: o mesmo espaço em todas */
  --espaco-titulo: clamp(2.5rem, 2rem + 2vw, 4rem);
  --section-gap: clamp(7.5rem, 5rem + 6vw, 12.5rem);  /* 120–200px entre seções no desktop */

  /* Forma: um só canto e um só botão no site inteiro */
  --radius: 0px;            /* cantos retos em tudo, imagens e botões */
  --radius-ui: 6px;         /* só dentro das demonstrações (data-ui): os balões e os painéis do aplicativo */
  --button-height: 56px;

  /* Movimento: transform e opacidade, e nada mais */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --rise: 24px;             /* quanto um elemento sobe na entrada */
  --stagger: 75ms;          /* o intervalo entre as partes de uma seção */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --rise: 0px;
    --stagger: 0ms;
  }
}