@layer tokens {
  :root {
    /* Cor — monocromática, derivada da marca. Nenhuma cor de acento. */
    --bg: #000000;
    --bg-elev: #0a0a0a;
    --surface: #121214;
    --surface-hi: #1c1c1f;

    --text: #ffffff;
    --text-2: #a8a8a8;
    --text-3: #757575;

    /* Verde-buriti: o único acento do site, desde 2026-09-11. Vereda, no
       sertão, é a faixa verde de buritis ao longo da água no meio do
       cerrado seco — o verde vem do nome da marca, não de gosto.
       Apagado de propósito: saturação de 23%, contra 70% do verde do
       WhatsApp. 8,5:1 sobre o preto, e o mesmo com texto preto sobre ele.
       Só como sinal — botão principal, curva, link ativo, anel de foco.
       Nunca fundo, nunca área grande. */
    --acento: #8fae7e;

    --line: rgba(255, 255, 255, 0.12);
    --line-hi: rgba(255, 255, 255, 0.3);
    --topo: rgba(255, 255, 255, 0.05);
    --veil: rgba(0, 0, 0, 0.55);

    /* Tipografia — a parte variável é sempre rem + vw, nunca vw puro,
       para a escala acompanhar o zoom de texto do navegador (WCAG 1.4.4). */
    --ff-display: "Fifties Movies", "Impact", sans-serif;
    --ff-text: "Garet", "Segoe UI", system-ui, sans-serif;

    /* 40px a 104px. O mínimo não é 52px porque CRIATIVIDADE, de 12 letras,
       mede 333px a 52px e estoura os 320px úteis de uma tela de 360.
       O máximo não é 136px porque a 104px o slogan inteiro fecha em duas
       linhas equilibradas dentro dos 1312px de conteúdo; acima disso ele
       se parte em quatro linhas irregulares. */
    --fs-display: clamp(2.5rem, 1.17rem + 5.93vw, 6.5rem);
    --fs-h1: clamp(2.5rem, 1.75rem + 3.33vw, 4.75rem);
    --fs-h2: clamp(2.25rem, 2rem + 1.11vw, 3rem);
    --fs-stat: clamp(3rem, 2rem + 4.44vw, 6rem);
    --fs-h3: clamp(1.25rem, 1.125rem + 0.56vw, 1.625rem);
    --fs-lead: clamp(1.0625rem, 0.98rem + 0.37vw, 1.3125rem);
    --fs-body: 1rem;
    --fs-sm: 0.875rem;
    --fs-label: 0.75rem;
    --fs-btn: 0.8125rem;

    /* Espaço */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 80px;
    --s-10: 96px;
    --s-11: 128px;
    --s-12: 160px;

    --rhythm: clamp(5rem, 3.33rem + 7.41vw, 10rem);
    --rhythm-xl: clamp(7rem, 4.67rem + 10.37vw, 14rem);

    --container: 1440px;
    --gutter: 20px;
    --grid-gap: 16px;
    --header-h: 64px;

    /* Raio — arredondado desde 2026-09-12, a pedido do cliente: "funciona
       mais com nossa estética mais fluida". Era 2 / 4 / 8px, geometria quase
       reta. Nada acima de 24px em bloco, para não virar bolha. */
    --r-sm: 8px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-pill: 999px;

    /* Movimento */
    --dur-fast: 200ms;
    --dur-base: 400ms;
    --dur-slow: 700ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --z-header: 100;
    --z-float: 200;
    --z-menu: 300;
    --z-modal: 400;
    /* Acima do modal de propósito: o grão cobre a página inteira, e se
       sumisse quando o vídeo abre a troca de superfície apareceria. */
    --z-grao: 500;

    /* Opacidade do grão de filme. É elemento de atmosfera: se o visitante
       reparar nele conscientemente, está forte demais. O ajuste fino se
       faz aqui, num lugar só. */
    --grao: 0.05;
  }

  @media (min-width: 768px) {
    :root {
      --gutter: 32px;
      --grid-gap: 24px;
    }
  }

  @media (min-width: 1024px) {
    :root {
      --gutter: 48px;
      --grid-gap: 32px;
      --header-h: 80px;
    }
  }

  @media (min-width: 1440px) {
    :root {
      --gutter: 64px;
    }
  }
}