:root {
  /* Brand & accent */
  --color-primary: #533afd;
  --color-primary-deep: #4434d4;
  --color-primary-press: #2e2b8c;
  --color-primary-soft: #665efd;
  --color-primary-bg-subdued: #b9b9f9;
  --color-brand-dark-900: #1c1e54;
  --color-ruby: #ea2261;
  --color-magenta: #f96bee;
  --color-lemon: #9b6829;

  /* Surface */
  --color-canvas: #ffffff;
  --color-canvas-soft: #f6f9fc;
  --color-canvas-cream: #f5e9d4;
  --color-hairline: #e3e8ee;
  --color-hairline-input: #a8c3de;

  /* Text */
  --color-ink: #0d253d;
  --color-ink-secondary: #273951;
  --color-ink-mute: #64748d;
  --color-ink-mute-2: #61718a;
  --color-on-primary: #ffffff;

  /* Semantic aliases */
  --surface-page: var(--color-canvas);
  --surface-soft: var(--color-canvas-soft);
  --surface-cream: var(--color-canvas-cream);
  --surface-dark: var(--color-brand-dark-900);
  --text-body: var(--color-ink);
  --text-muted: var(--color-ink-mute);
  --border-default: var(--color-hairline);
  --border-input: var(--color-hairline-input);
  --accent-cta: var(--color-primary);
  --accent-link: var(--color-primary);
}