/* ══════════════════════════════════════════════
   yzze — tokens.css
   A direção visual em código (ver metodo/fases/2-direcao.md).
   Nenhum valor bruto de cor, tamanho ou espaçamento fora daqui.
   ══════════════════════════════════════════════ */

:root {
  /* cores base */
  --ink: #0b0b10;
  --ink-soft: #15151d;
  --ink-line: rgba(255, 255, 255, 0.09);
  --paper: #f4f3ef;
  --paper-line: rgba(11, 11, 16, 0.12);
  --white: #fbfbf9;

  /* principais */
  --violet: #7c5cff;
  --violet-deep: #5a3ee6;
  --violet-soft: rgba(124, 92, 255, 0.14);

  /* detalhes */
  --orange: #ff6b2c;
  --yellow: #ffd66b;
  --green: #3ddc97;

  /* tipografia */
  --font: "Bricolage Grotesque", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  /* fluid type */
  --fs-display: clamp(2.5rem, 5.4vw, 4.9rem);
  --fs-h2: clamp(2.1rem, 4.6vw, 4.2rem);
  --fs-body: clamp(1rem, 1.15vw, 1.125rem);
  /* retratos em bolha do hero: aparecem de 1024px para baixo. Diâmetro fixo de
     propósito — quando crescia por vw chegava a 72px no tablet e inchava o topo
     das telas baixas, empurrando o título para fora da primeira dobra */
  --bubble-size: 46px;
  /* tamanho da marca no topo da página (a recolhida é fixa, em components.css).
     De 1024px para baixo ela passa a se medir pelo título — ver responsive.css */
  --logo-size: 2.875rem;

  /* layout */
  --container: 1360px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 20px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-lux: cubic-bezier(0.65, 0.05, 0, 1);
  --dur: 0.7s;

  /* tema corrente (dark default) */
  --fg: var(--white);
  --bg: var(--ink);
  --line: var(--ink-line);
  --muted: rgba(251, 251, 249, 0.62);
}