/* Semantic aliases. Prefer these over the base palette in product code. */
:root{
  --surface-page:var(--color-neutral-50);
  --surface-card:var(--color-white);
  --surface-inverse:var(--color-black);
  --surface-accent:var(--color-red);
  --surface-muted:var(--color-neutral-50);

  --text-heading:var(--color-black);
  --text-body:var(--color-neutral-800);
  --text-secondary:var(--color-neutral-700);
  --text-muted:var(--color-neutral-600);
  --text-faint:var(--color-neutral-400);
  --text-accent:var(--color-red);
  --text-on-dark:var(--color-white);
  --text-on-dark-secondary:var(--color-neutral-300);
  --text-on-dark-muted:var(--color-neutral-500);
  --text-on-accent:var(--color-white);
  --text-on-accent-secondary:var(--color-red-tint);

  --border-default:var(--color-neutral-100);
  --border-strong:var(--color-black);
  --border-input:var(--color-neutral-200);
  --border-accent:var(--color-red);

  --action-primary-bg:var(--color-red);
  --action-primary-bg-hover:var(--color-red-dark);
  --action-primary-text:var(--color-white);
  --action-dark-bg:var(--color-black);
  --action-dark-bg-hover:var(--color-neutral-800);
  --action-secondary-border:var(--color-black);
  --action-disabled-bg:var(--color-neutral-50);
  --action-disabled-text:var(--color-neutral-400);
  --action-disabled-border:var(--color-neutral-100);

  --state-error:var(--color-red);
  --state-active:var(--color-red);
}

a{color:var(--color-red);text-decoration:none}
a:hover{color:var(--color-black)}