:root {
  /* Typography tokens: keep semantic names stable even if font delivery changes. */
  --font-heading: "Raleway", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;

  --font-weight-body-regular: 400;
  --font-weight-body-medium: 500;
  --font-weight-body-semibold: 600;
  --font-weight-body-bold: 700;
  --font-weight-body-heavy: 800;

  --font-weight-heading-semibold: 600;
  --font-weight-heading-bold: 700;
  --font-weight-heading-heavy: 800;

  --line-height-body: 1.6;
  --line-height-heading: 1.1;
  --tracking-heading-tight: -0.04em;
  --tracking-heading-medium: -0.03em;
  --tracking-ui-wide: 0.08em;

  /* Brand scales: edit these values first when the palette changes. */
  --brand-primary-50: #f5efff;
  --brand-primary-100: #ede5ff;
  --brand-primary-200: #d8c2ff;
  --brand-primary-500: #6f00ff;
  --brand-primary-700: #5300c8;

  --brand-secondary-50: #fcf8eb;
  --brand-secondary-100: #f5edd0;
  --brand-secondary-200: #eadca7;
  --brand-secondary-300: #d6ba55;
  --brand-secondary-600: #8e7426;
  --brand-secondary-700: #725c1c;
  --brand-secondary-800: #5b4916;

  /* Semantic tokens: use these in component styles. */
  --color-bg-page-top: #fffdf7;
  --color-bg-page: var(--brand-secondary-50);
  --color-bg-page-bottom: #f6edd0;
  --color-bg-surface: #ffffff;
  --color-bg-surface-soft: #fdfaf0;
  --color-bg-surface-muted: #f8f1dc;
  --color-bg-surface-strong: var(--brand-secondary-800);
  --color-bg-surface-strong-soft: var(--brand-secondary-700);

  --color-text: #211d13;
  --color-text-muted: #6d6652;
  --color-text-inverse: #ffffff;
  --color-border: #e7dcc0;
  --color-border-strong: #d8c8a0;

  --color-link: var(--brand-primary-500);
  --color-link-hover: var(--brand-primary-700);
  --color-cta-bg: var(--brand-primary-500);
  --color-cta-bg-hover: var(--brand-primary-700);
  --color-cta-text: #ffffff;
  --color-heading-accent: var(--brand-secondary-700);
  --color-heading-accent-soft: var(--brand-secondary-600);

  --color-primary-border-soft: rgba(111, 0, 255, 0.12);
  --color-primary-border: rgba(111, 0, 255, 0.18);
  --color-primary-border-strong: rgba(83, 0, 200, 0.24);
  --color-primary-shadow: rgba(83, 0, 200, 0.18);
  --color-primary-glow: rgba(111, 0, 255, 0.18);
  --color-focus-ring: rgba(111, 0, 255, 0.24);

  --color-secondary-border-soft: rgba(142, 116, 38, 0.16);
  --color-secondary-border: rgba(142, 116, 38, 0.22);
  --color-secondary-glow: rgba(214, 186, 85, 0.22);
  --color-secondary-glow-soft: rgba(214, 186, 85, 0.12);
  --color-secondary-surface-glass: rgba(255, 251, 240, 0.82);

  --color-interactive-subtle-bg: rgba(111, 0, 255, 0.02);
  --color-interactive-hover-bg: rgba(111, 0, 255, 0.05);
  --color-interactive-hover-border: rgba(111, 0, 255, 0.18);
  --color-interactive-selected-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 239, 255, 0.94) 100%);
  --color-interactive-selected-border: rgba(111, 0, 255, 0.34);
  --color-interactive-selected-accent: var(--brand-primary-500);
  --color-interactive-selected-accent-soft: rgba(111, 0, 255, 0.08);
  --shadow-interactive-hover: 0 8px 18px rgba(83, 0, 200, 0.08);
  --shadow-interactive-selected: 0 12px 24px rgba(83, 0, 200, 0.14);
  --shadow-interactive-pressed: 0 6px 12px rgba(83, 0, 200, 0.12);

  /* Compatibility aliases for existing styles. */
  --bg: var(--color-bg-page);
  --surface: var(--color-bg-surface);
  --surface-soft: var(--color-bg-surface-soft);
  --surface-strong: var(--color-bg-surface-strong);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --primary: var(--color-link);
  --primary-dark: var(--color-link-hover);
  --accent: var(--color-heading-accent);
  --secondary: var(--color-bg-surface-strong);
  --secondary-soft: var(--color-bg-surface-strong-soft);
  --accent-soft: var(--brand-secondary-100);
  --accent-tint: var(--brand-secondary-50);
}