:root {
  /* Brand & accent */
  --color-primary: #0a0a0a;
  --color-brand-pink: #ff4d8b;
  --color-brand-teal: #1a3a3a;
  --color-brand-lavender: #b8a4ed;
  --color-brand-peach: #ffb084;
  --color-brand-ochre: #e8b94a;
  --color-brand-mint: #a4d4c5;
  --color-brand-coral: #ff6b5a;

  /* Surface */
  --color-canvas: #fffaf0;
  --color-surface-soft: #faf5e8;
  --color-surface-card: #f5f0e0;
  --color-surface-strong: #ebe6d6;
  --color-surface-dark: #0a1a1a;
  --color-surface-dark-elevated: #1a2a2a;
  --color-hairline: #e5e5e5;

  /* Text */
  --color-ink: #0a0a0a;
  --color-body-strong: #1a1a1a;
  --color-body: #3a3a3a;
  --color-muted: #6a6a6a;
  --color-muted-soft: #9a9a9a;
  --color-on-primary: #ffffff;
  --color-on-dark: #ffffff;

  /* Semantic */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Semantic aliases */
  --surface-page: var(--color-canvas);
  --surface-band: var(--color-surface-soft);
  --surface-card: var(--color-surface-card);
  --border-hairline: var(--color-hairline);
  --text-heading: var(--color-ink);
  --text-body: var(--color-body);
  --text-muted: var(--color-muted);
  --text-on-color: var(--color-on-primary);
}