:root {
  /* Brand palette */
  --color-purple: #5d1a87;
  --color-purple-dark: #42115f;
  --color-purple-mid: #7330a0;

  /* Neutral palette */
  --color-ink: #151515;
  --color-nav-ink: #171219;
  --color-muted: #4b4650;
  --color-paper: #fffdfb;
  --color-surface: #ffffff;
  --color-warm: #f5f0eb;
  --color-line: #d7d0ca;

  /* Transparent color tokens */
  --color-header-border: rgba(39, 28, 24, 0.12);
  --color-header-shadow: rgba(35, 24, 18, 0.08);
  --color-button-shadow: rgba(37, 22, 42, 0.22);
  --color-hero-warm: rgba(245, 240, 235, 0.72);
  --color-hero-light: rgba(255, 255, 255, 0.78);
  --color-hero-cool: rgba(243, 235, 228, 0.72);
  --color-hero-glow: rgba(93, 26, 135, 0.08);
  --color-focus-ring: rgba(93, 26, 135, 0.18);
  --color-brand-rule: rgba(93, 26, 135, 0.35);

  /* Semantic aliases */
  --color-text: var(--color-ink);
  --color-background: var(--color-paper);
  --color-accent: var(--color-purple);
  --color-accent-dark: var(--color-purple-dark);
  --color-accent-hover: var(--color-purple-mid);
  --color-on-accent: var(--color-surface);

  /* Typography */
  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;

  /* Effects */
  --shadow-header: 0 3px 10px var(--color-header-shadow);
  --shadow-card: 0 8px 15px var(--color-button-shadow);
  --radius-control: 8px;

  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-background);
}