:root {
  /* Cores principais */
  --purple-dark: #6b5680;
  --purple-medium: #5a4a6d;
  --purple-light: #c4b5dd;
  --bg-light: #f4effb;
  --bg-dark: #151515;
  --text-light: #ede6f5;
  --text-dark: #5a4b73;
  --purple-gray: var(--text-dark); /* alias: mesmo tom do texto escuro, uso em bordas/ícones */
  --purple-dark-rgb: 107, 86, 128; /* mesmo valor de --purple-dark, em componentes RGB para uso em rgba() */
  --purple-medium-rgb: 90, 74, 109; /* mesmo valor de --purple-medium */
  --purple-light-rgb: 196, 181, 221; /* mesmo valor de --purple-light */
  --bg-dark-rgb: 21, 21, 21; /* mesmo valor de --bg-dark */

  /* Bordas */
  --border-soft: rgba(237, 230, 245, 0.15);
  --border-strong: rgba(110, 90, 130, 0.2);

  /* Overlays e transparências (Figma: cores secundárias e overlays) */
  --overlay-white: rgba(255, 255, 255, 0.06);
  --overlay-white-soft: rgba(237, 230, 245, 0.08);
  --overlay-purple: rgba(196, 181, 221, 0.25);
  --text-light-60: rgba(237, 230, 245, 0.6);
  --text-light-30: rgba(237, 230, 245, 0.3);

  /* Sombra e raio */
  --shadow-soft: 0 18px 40px rgba(30, 28, 33, 0.12);
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* Transições (usadas em hover de botões, accordion e menu mobile) */
  --transition-fast: 150ms ease;
  --transition-medium: 300ms ease;

  /* Tipografia */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Poppins', 'Segoe UI', sans-serif;

  /* Layout */
  --container-width: min(1200px, calc(100% - 64px));

  /* Espaçamento */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;

  /* Breakpoints de referência (usar valores diretos nas media queries):
     Desktop: > 1024px
     Tablet: <= 1024px
     Mobile: <= 768px
     Mobile pequeno: <= 480px
  */
}