:root{
  /* Brand & accent */
  --color-primary:#4a154b;
  --color-primary-deep:#481a54;
  --color-primary-press:#611f69;
  --color-primary-tint:#592466;
  --color-link-blue:#1264a3;
  --color-link-hover:#3860be;

  /* Surface */
  --color-canvas:#ffffff;
  --color-canvas-cream:#f4ede4;
  --color-canvas-lavender:#f9f0ff;
  --color-surface-aubergine:#4a154b;
  --color-hairline:#e6e6e6;

  /* Text */
  --color-ink:#1d1d1d;
  --color-ink-mute:#696969;
  --color-on-primary:#ffffff;
  --color-on-aubergine-mute:#d9bdde;

  /* Semantic */
  --color-semantic-error:#cc4117;
  --color-semantic-success:#007a5a;

  /* Mesh gradient stops */
  --mesh-peach:#fff0e6;
  --mesh-lavender:#e9d8ff;
  --mesh-green:#dfe7dc;

  /* Semantic aliases */
  --text-body:var(--color-ink);
  --text-muted:var(--color-ink-mute);
  --text-on-dark:var(--color-on-primary);
  --text-on-dark-muted:var(--color-on-aubergine-mute);
  --text-link:var(--color-link-blue);
  --text-link-hover:var(--color-link-hover);
  --surface-page:var(--color-canvas);
  --surface-card:var(--color-canvas);
  --surface-warm:var(--color-canvas-cream);
  --surface-soft:var(--color-canvas-lavender);
  --surface-dark:var(--color-surface-aubergine);
  --border-hairline:var(--color-hairline);
  --action-fill:var(--color-primary);
  --action-fill-press:var(--color-primary-press);
}