/* ─────────────────────────────────────────────────────────────────────────
   tokens.css — tradução literal de referencia/RECEITA-VISUAL.md
   Paleta: manual, confirmada pelo usuário (recipe.layers.paleta = manual).
   Tipografia, escala, espaçamento, forma e movimento: www.themaestri.app.
   Este arquivo é o único lugar onde existe valor literal. Trocar ele
   basta para vestir a mesma página com outra direção criativa.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── cor: papéis medidos ─────────────────────────────────────────────── */
  --color-bg: #ffffff;
  --color-surface: #000000;
  --color-surface-soft: #f5f5f5;
  --color-surface-softer: #fafafa;
  --color-text: #171717;
  --color-heading: #171717;
  --color-muted: #686868;
  --color-border: #d8d8d8;
  --color-accent: #bcea3e;
  --color-primary: #bcea3e;
  --color-primary-hover: #a5ce37;

  /* tons derivados dos recortes da referência (registrados em DECISOES.md) */
  /* 2ª linha do título em duas cores. O cinza dos recortes da referência
     (~#a8a8a8) dá 2,38:1 sobre branco e reprova até no limite de texto
     grande. Escurecido para 3,45:1, que passa em texto grande e mantém a
     distância visual para o --color-muted do corpo. Ver DECISOES.md. */
  --color-heading-mute: #8a8a8a;
  --color-border-hover: #b4b4b4;  /* .hover:border-neutral-300 medido      */
  --color-hover-soft: #f0f0f0;    /* .hover:bg-neutral-100 medido          */

  /* superfície escura: papéis dentro do preto */
  --color-on-surface: #ffffff;
  --color-on-surface-muted: #a3a3a3;
  --color-on-surface-soft: rgb(255 255 255 / 6%);
  --color-on-surface-border: rgb(255 255 255 / 12%);
  --color-on-surface-hover: rgb(255 255 255 / 10%); /* .hover:bg-white/10   */

  /* botões: hover medido do CSSOM da referência */
  --btn-bg: #bcea3e;
  --btn-bg-hover: #a5ce37;
  --btn-text: #171717;
  --btn-dark-bg: #000000;
  --btn-dark-bg-hover: #2d2d2f;   /* .hover:bg-[#2d2d2f] medido            */
  --btn-dark-text: #ffffff;

  --focus-ring: #171717;
  --color-tag-bg: #ededed;   /* pílula "em breve", legível em claro e escuro */

  /* ── tipografia: Geist, escala medida em www.themaestri.app ──────────── */
  --font-heading: 'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* mínimo = medido no menor breakpoint · máximo = medido em 1440px       */
  --text-h1: clamp(2.25rem, 1.15rem + 4.7vw, 4rem);        /* 36 → 64px    */
  --text-h2: clamp(1.75rem, 1.05rem + 3vw, 3rem);          /* 28 → 48px    */
  --text-h3: clamp(1.25rem, 1.05rem + 0.85vw, 1.75rem);    /* 20 → 28px    */
  --text-h4: 1.125rem;                                      /* 18px medido  */
  --text-body: 1rem;                                        /* 16px medido  */
  --text-lead: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);    /* 16 → 18px    */
  --text-small: 0.875rem;
  --text-badge: 0.75rem;

  --weight-body: 400;
  --weight-medium: 600;
  --weight-bold: 700;

  --leading-h1: 1.1;      /* 70.4 / 64 medido */
  --leading-h2: 1.15;
  --leading-h3: 1.2;
  --leading-body: 1.5;    /* 24 / 16 medido   */
  --leading-lead: 1.6;

  --tracking-title: -0.025em;   /* -1.6px em 64px · -1.2px em 48px medidos */
  --tracking-badge: 0.06em;

  /* ── espaço: paddings 32/128, gaps 4-16, containers 448-1152 medidos ─── */
  --space-section: clamp(6rem, 3.5rem + 6vw, 8rem);  /* 96 → 128px medidos */
  --space-block: clamp(2.5rem, 1.8rem + 2.6vw, 3rem);
  --gutter: clamp(1rem, 4vw, 1.5rem);                /* 16 → 24px medidos  */

  --gap-1: 0.25rem;   /* 4px  */
  --gap-2: 0.5rem;    /* 8px  */
  --gap-3: 0.75rem;   /* 12px */
  --gap-4: 1rem;      /* 16px — gap dominante das grades medidas */
  --gap-6: 1.5rem;    /* 24px */
  --gap-8: 2rem;      /* 32px — padding interno de card */
  --gap-12: 3rem;     /* 48px */

  --wrap: 1152px;      /* max-w-6xl medido */
  --wrap-md: 1024px;   /* grade de 2 colunas: faq e preços */
  --wrap-sm: 768px;    /* max-w-3xl: cabeçalho de seção  */
  --wrap-xs: 672px;    /* max-w-2xl: fechamento          */

  /* ── forma: raios e sombras medidos ──────────────────────────────────── */
  --radius-pill: 9999px;
  --radius-lg: 32px;
  --radius-card: 24px;
  --radius-sm: 16px;
  --radius-xs: 12px;

  --shadow-sm: 0 1px 3px rgb(0 0 0 / 10%);
  --shadow-card: 0 4px 24px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 4%);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);

  /* fade branco medido no fim da mídia de página inteira */
  --fade-bottom: linear-gradient(to top, rgb(255 255 255) 20%, rgb(255 255 255 / 0) 70%);

  /* padrão de pontos do fundo do hero (canvas medido na referência,
     recriado em CSS com a paleta travada) */
  --dot: rgb(23 23 23 / 7%);
  --dot-accent: rgb(188 234 62 / 45%);

  /* ── movimento ───────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-hover: 0.16s;
  --dur-reveal: 0.7s;

  --header-h: 76px;
}