:root{
  /* Base — brand */
  --orange-500:#FC6732; --orange-600:#EA5219; --orange-700:#C93F0C;
  --orange-100:#FFD8C2; --orange-50:#FDE8DC;

  /* Base — ink / dark surfaces */
  --navy-900:#0B0F2C; --navy-800:#1A1E38; --navy-700:#2A2F4C;

  /* Base — cream neutrals (the page is never pure white) */
  --cream-50:#F7F6F2; --cream-100:#F1EFE9; --cream-200:#EAE8DF; --cream-300:#E5E2D9;
  --cream-400:#D6D2C6; --paper:#FDFCFA; --white:#FFFFFF;

  /* Base — greys for body copy */
  --grey-600:#5C6070; --grey-500:#7A7E8C; --grey-400:#9CA0AC;

  /* Base — semantic hues */
  --green-700:#2D6A4F; --green-100:#E6F0E9;
  --indigo-500:#5C55C8; /* map water — imagery accent only */
  --heart-red:#E8322A;  /* the ❤️ in "Med ❤️ for kunden" */

  /* Semantic — surfaces */
  --surface-page:var(--cream-50);
  --surface-card:var(--paper);
  --surface-sunken:var(--cream-100);
  --surface-quote:var(--cream-200);
  --surface-dark:var(--navy-900);
  --surface-dark-inset:var(--navy-800);
  --surface-accent-soft:var(--orange-100);
  --surface-success-soft:var(--green-100);

  /* Semantic — text */
  --text-heading:var(--navy-900);
  --text-body:var(--grey-600);
  --text-muted:var(--grey-500);
  --text-eyebrow:var(--grey-500);
  --text-accent:var(--orange-500);
  --text-on-dark:var(--white);
  --text-on-dark-muted:#B9BCCB;
  --text-on-accent:var(--navy-900);

  /* Semantic — lines */
  --border-hairline:var(--cream-300);
  --border-card:var(--cream-300);
  --border-strong:var(--cream-400);
  --border-on-dark:rgba(255,255,255,.12);

  /* Semantic — interactive */
  --action-primary:var(--orange-500);
  --action-primary-hover:var(--orange-600);
  --action-primary-active:var(--orange-700);
  --action-dark:var(--navy-900);
  --focus-ring:var(--orange-500);
}