/* tokens.css — valores BASE de todas as variáveis da página.
   O style.css usa estas variáveis e nunca tem cor escrita direto.

   ATENÇÃO: o tema visual (css/theme.css) carrega DEPOIS deste arquivo e redefine as cores (--color-*),
   as fontes e os pesos (--font-*, --weight-*), os cantos (--radius-*), as sombras (--shadow-*), o fundo
   do topo (--gradient-hero), o tamanho do título do topo (--hero-title-size), o espaço entre as letras
   dos títulos (--letter-spacing-heading) e os tempos de animação --duration-fast e --duration-slow.
   Mudar esses valores aqui NÃO aparece na página. Para trocar cores e fontes do cliente, use a
   skill /design: ela escreve no bloco "PERSONALIZAÇÃO DO CLIENTE" do theme.css e confere o contraste
   (node tools/contrast.mjs).

   As cores e fontes abaixo são só uma reserva (iguais às do tema Aurora, o padrão do template).
   Valem de verdade aqui (os temas não mudam): tamanhos de texto (--fs-*), entrelinhas (--lh-*),
   espaçamentos (--space-*), larguras (--container, --measure, --sticky-height), --duration e --ease.
   Mudou algo? Aumente o ?v= do tokens.css em todas as páginas. */

:root {
  /* ---------- Cores ---------- */
  --color-primary: #6B4EFF;          /* cor da marca: botões, links, destaques */
  --color-primary-strong: #4A2FD6;   /* versão mais escura (botão com o mouse em cima) */
  --color-primary-soft: #ECE8FF;     /* versão bem clara (fundos de ícones e faixas) */
  --color-primary-contrast: #FFFFFF; /* texto em cima da cor primária */
  --color-accent: #FF7AB8;           /* cor de apoio: estrelas, selos, botão do CTA final */
  --color-accent-contrast: #15122B;  /* texto em cima da cor de apoio */
  --color-bg: #F7F7FB;               /* fundo da página */
  --color-surface: #FFFFFF;          /* fundo de cartões, formulário, FAQ */
  --color-surface-alt: #F0EEFA;      /* fundo das seções alternadas */
  --color-ink: #15122B;              /* fundo escuro (seção do CTA final e rodapé) */
  --color-ink-contrast: #FFFFFF;     /* texto em cima do fundo escuro */
  --color-text: #15122B;             /* texto principal */
  --color-muted: #5E5A78;            /* texto secundário */
  --color-border: #E2DEF2;           /* linhas e bordas */
  --color-success: #1F7A4D;          /* mensagens de sucesso */
  --color-error: #C0263D;            /* mensagens de erro */
  --color-whatsapp: #15803D;         /* botão flutuante do WhatsApp (5:1 com texto branco) */
  --color-whatsapp-contrast: #FFFFFF;
  --color-focus: #6B4EFF;            /* contorno de foco (navegação pelo teclado) em fundo claro */
  --color-focus-on-dark: #C9BDFF;    /* contorno de foco em fundo escuro (CTA final e rodapé) */

  /* Cores dos efeitos decorativos (manchas, malhas, formas). Os temas trocam estas 3. */
  --color-decor-1: #8C6BFF;
  --color-decor-2: #FF8CC6;
  --color-decor-3: #8FD8FF;

  /* Fundo do topo da página. Cor sólida = dois valores iguais no linear-gradient. */
  --gradient-hero: linear-gradient(180deg, var(--color-bg), var(--color-bg));

  /* ---------- Fontes ----------
     Reserva: o tema define as fontes de verdade (e o link <link data-theme-fonts> das páginas). */
  --font-heading: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --weight-heading: 700;
  --weight-strong: 600;

  /* Tamanhos de texto: clamp(mínimo no celular, tamanho fluido, máximo no computador) */
  --fs-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --fs-base: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --fs-lg: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);
  --fs-3xl: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);

  --hero-title-size: var(--fs-3xl);   /* tamanho do título do topo */
  --letter-spacing-heading: -0.01em;  /* espaço entre as letras dos títulos */

  --lh-tight: 1.08;
  --lh-heading: 1.2;
  --lh-body: 1.6;

  /* ---------- Espaçamentos (de pequeno a grande) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: clamp(3.5rem, 2.5rem + 4vw, 6rem); /* espaço entre seções */

  /* ---------- Cantos arredondados ---------- */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-full: 999px;

  /* ---------- Sombras ---------- */
  --shadow-sm: 0 1px 2px rgba(21, 18, 43, 0.06);
  --shadow-md: 0 14px 34px -16px rgba(58, 36, 160, 0.3);
  --shadow-lg: 0 34px 70px -30px rgba(58, 36, 160, 0.42);

  /* ---------- Layout ---------- */
  --container: 72rem;       /* largura máxima do conteúdo */
  --measure: 38rem;         /* largura máxima de parágrafos (leitura confortável) */
  --sticky-height: 4.5rem;  /* altura da barra fixa do celular */

  /* ---------- Movimento ---------- */
  --duration: 450ms;
  --duration-fast: 180ms;   /* animações rápidas (botões, cartões) */
  --duration-slow: 900ms;   /* animações lentas (entradas, efeitos decorativos) */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}