/* ==========================================================================
   Design tokens — identidade visual da Tariane (Psicóloga)

   Paleta fixa definida pela identidade visual: branco, terracota e
   cinza-amarronzado. Não introduzimos outras cores.

   Notas de contraste (WCAG 2.1 AA, fundo branco #FFFFFF):
   - --cinza-escuro (#5B554F) sobre branco -> ~7.35:1  (passa AA e AAA em
     qualquer tamanho de texto). Usar como cor de texto (principal e
     secundário) e de fundo de botões/elementos interativos com texto.
   - --terracota (#AF774D) sobre branco -> ~3.77:1 (passa AA apenas para
     texto grande — títulos ≥ 24px ou ≥ 19px em negrito — e para
     elementos gráficos/UI, como bordas, ícones e indicador de foco).
     NÃO usar como cor de TEXTO em tamanho normal (parágrafos, links,
     texto de botão) nem como fundo atrás de texto branco: nesses casos
     usar --terracota-escuro.
   - --terracota-escuro (#9C6640) sobre branco -> ~4.79:1 (passa AA para
     texto normal). Por ser a mesma relação de contraste em qualquer
     ordem das duas cores, serve tanto para texto terracota sobre fundo
     branco quanto para texto branco sobre fundo terracota. Usar nos
     estados hover/focus de botões e links que antes usavam --terracota.
   ========================================================================== */

:root {
  /* Paleta da identidade visual */
  --branco: #ffffff;
  --terracota: #af774d;
  --terracota-escuro: #9c6640;
  --terracota-claro: rgba(175, 119, 77, 0.4); /* uso só decorativo (traço/arco), nunca em texto */
  --cinza-escuro: #5b554f;

  /* Papéis semânticos (para facilitar troca/ajuste futuro) */
  --color-bg: var(--branco);
  --color-text: var(--cinza-escuro);
  --color-heading: var(--cinza-escuro);
  --color-accent: var(--terracota);
  --color-surface: #faf6f2; /* tom neutro claríssimo, derivado do terracota, para cards/seções alternadas */

  --color-btn-bg: var(--cinza-escuro);
  --color-btn-bg-hover: var(--terracota-escuro);
  --color-btn-text: var(--branco);

  --color-focus-ring: var(--terracota);

  /* Tipografia */
  --font-primary: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;

  --fs-base: 1rem;
  --fs-sm: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 2.75rem;

  --lh-base: 1.6;
  --lh-heading: 1.2;

  /* Espaçamento (escala em rem) */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Layout */
  --container-max: 75rem; /* 1200px */
  --container-padding: var(--space-sm);
  --radius: 0.5rem;

  /* Transições (desativadas globalmente via prefers-reduced-motion no reset.css) */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}