:root {
  --color-black: #121212;
  --color-dark: #1e1e1e;
  --color-gray-bg: #f5f5f5;
  --color-white: #ffffff;
  --color-accent: #d92d20;
  --color-accent-dark: #b3251a;
  --color-text: #1a1a1a;
  --color-text-muted: #5b5b5b;
  --color-border: #e2e2e2;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  --container-max: 1200px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.12);

  --transition: 0.25s ease;

  /* ===== Tokens semânticos (tema claro = padrão do site) ===== */
  --bg: var(--color-white);
  --bg-muted: var(--color-gray-bg);
  --surface: var(--color-white);
  --text: var(--color-text);
  --text-muted: var(--color-text-muted);
  --border: var(--color-border);
  --header-bg: rgba(255, 255, 255, 0.92);
  --header-bg-scrolled: rgba(255, 255, 255, 0.97);
  --btn-primary-bg: var(--color-black);
  --btn-primary-text: var(--color-white);
}

/* Tema escuro: só aplicado quando o usuário escolhe pelo theme switcher
   (persistido em localStorage, ver public/js/lib/theme.js). O tema claro
   continua sendo o padrão do site, conforme pedido. */
:root[data-theme='dark'] {
  --bg: #121212;
  --bg-muted: #1a1a1a;
  --surface: #1c1c1c;
  --text: #f2f2f2;
  --text-muted: #b0b0b0;
  --border: #2e2e2e;
  --header-bg: rgba(18, 18, 18, 0.9);
  --header-bg-scrolled: rgba(18, 18, 18, 0.97);
  --btn-primary-bg: #f2f2f2;
  --btn-primary-text: #121212;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
}