/* Semantic aliases. Consume these, not the raw ramps. */
:root{
  /* Text */
  --text-strong:var(--ff-ink-deep);
  --text-body:var(--ff-ink);
  --text-muted:var(--neutral-500);
  --text-subtle:var(--neutral-400);
  --text-accent:var(--ff-purple);
  --text-on-accent:var(--white);
  --text-on-dark:var(--white);
  --text-on-dark-muted:rgba(255,255,255,.72);
  --text-link:var(--ff-purple);
  --text-link-hover:var(--purple-700);

  /* Surfaces */
  --surface-page:var(--white);
  --surface-page-tint:var(--neutral-150);
  --surface-app:var(--neutral-100);
  --surface-card:var(--white);
  --surface-card-tint:var(--purple-50);
  --surface-inset:var(--neutral-50);
  --surface-dark:var(--purple-900);
  --surface-darkest:var(--ff-ink-deep);
  --surface-accent:var(--ff-purple);
  --surface-accent-soft:var(--purple-50);
  --surface-teal:var(--ff-teal);
  --surface-teal-soft:var(--teal-50);

  /* Borders */
  --border-default:var(--neutral-200);
  --border-strong:var(--neutral-300);
  --border-accent:var(--ff-purple);
  --border-on-dark:rgba(255,255,255,.16);

  /* Interaction */
  --action-primary:var(--ff-purple);
  --action-primary-hover:var(--purple-600);
  --action-primary-active:var(--purple-700);
  --action-secondary:var(--purple-50);
  --action-secondary-hover:var(--purple-100);
  --action-teal:var(--ff-teal);
  --action-teal-hover:var(--teal-600);
  --action-disabled-bg:var(--neutral-200);
  --action-disabled-text:var(--neutral-400);
  --focus-ring:var(--shadow-focus);

  /* Status — purple/teal do the positive work; red is the one hue added
     for destructive states because the manual defines none. */
  --status-success:var(--ff-teal);
  --status-success-soft:var(--teal-50);
  --status-progress:var(--ff-purple);
  --status-warning:#F2A21B;
  --status-warning-soft:#FDF1DC;
  --status-danger:#E23A3A;
  --status-danger-soft:#FCE8E8;
}