/* Tokens deste site. Paleta da Erika (08/11/2026): #240853, #131416, #6805F2, #FFEDFF, #BF04B3.
   Os tons de apoio (lilás, cinza do texto, linha) são misturas dessas cinco, sem cor nova.
   Quando o /marca montar a sua marca de vez, estas cores passam pra marca/tokens.css. */
:root {
  /* as cinco cores */
  --rosa: #ffedff;
  --violeta: #6805f2;
  --noite: #240853;
  --preto: #131416;
  --magenta: #bf04b3;

  /* misturas */
  --lilas: color-mix(in srgb, var(--violeta) 20%, var(--rosa));

  /* papéis */
  --branco: #ffffff;
  --offwhite: color-mix(in srgb, var(--preto) 3%, var(--branco));   /* fundo de seção pra separar da próxima */
  --fundo: var(--branco);                                            /* o fundo de tudo */
  --fundo-2: color-mix(in srgb, var(--violeta) 9%, var(--rosa));     /* cartões, serviços e perguntas */
  --tinta: var(--preto);                                             /* texto principal */
  --tinta-2: color-mix(in srgb, var(--preto) 72%, var(--rosa));      /* apoio */
  --destaque: var(--violeta);                                        /* a ação e o painel do topo */
  --destaque-2: var(--noite);                                        /* hover e blocos escuros */
  --sobre-destaque: #ffffff;
  --linha: color-mix(in srgb, var(--preto) 14%, transparent);

  /* fontes */
  --fonte-titulo: "Metropolis", "Segoe UI", system-ui, sans-serif;   /* títulos, seminegrito */
  --fonte-texto: "Metropolis", "Segoe UI", system-ui, sans-serif;    /* textos e botões */
  --fonte-destaque: "Times New Roman", Times, serif;                 /* palavras em itálico dentro dos títulos */
  --tracking-titulo: -0.045em;

  /* tamanho */
  --t-micro: 0.75rem;
  --t-apoio: 0.9rem;
  --t-texto: 1.0625rem;
  --t-titulo-3: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
  --t-titulo-2: clamp(2rem, 1.3rem + 3vw, 3.75rem);
  --t-titulo-1: clamp(2.6rem, 1.4rem + 5vw, 6rem);

  /* espaço */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-6: 24px; --e-8: 32px; --e-12: 48px; --e-16: 64px; --e-24: 96px;
  --margem: clamp(16px, 4vw, 40px);
  --largura: 76rem;

  /* forma e movimento */
  --raio: 14px;
  --raio-grande: clamp(20px, 3vw, 36px);
  --raio-pilula: 999px;
  --mola: cubic-bezier(0.32, 0.72, 0, 1);
  --suave: cubic-bezier(0.22, 1, 0.36, 1);   /* desacelera longo, sem tranco */
  --t-rapido: 300ms;
  --t-normal: 600ms;
}