:root {
  /* ---- Base palette ---- */
  --green-500: #4A9B5F;   /* Primär */
  --green-600: #3A7A4A;   /* Primär dunkel */
  --green-700: #2C6A3B;   /* pressed / darkest */
  --green-100: #E4F0E7;   /* tint for chips, hovers */
  --green-50:  #F0F5F2;   /* Hintergrund */

  --slate-900: #2C3E35;   /* Überschrift (heading ink, green-tinted charcoal) */
  --slate-600: #5C6D65;   /* Fließtext (body ink) — dunkler als der ursprüngliche Wert (#6B7C74),
                              der mit ~4.4:1 knapp unter WCAG-AA (4.5:1) für normalen Text lag. */
  --slate-300: #A9B6AF;   /* muted / disabled ink */
  --slate-200: #D8E0DB;   /* borders */
  --slate-100: #EAEFEC;   /* subtle fills */

  --white: #FFFFFF;

  /* ---- Semantic aliases ---- */
  --color-primary: var(--green-500);
  --color-primary-dark: var(--green-600);
  --color-primary-pressed: var(--green-700);
  --color-primary-tint: var(--green-100);

  --color-bg-page: var(--green-50);
  --color-bg-surface: var(--white);
  --color-bg-muted: var(--slate-100);

  --color-text-heading: var(--slate-900);
  --color-text-body: var(--slate-600);
  --color-text-muted: var(--slate-300);
  --color-text-on-primary: var(--white);

  --color-border: var(--slate-200);
  --color-border-strong: var(--slate-300);

  --color-success: var(--green-500);
  --color-warning: #C98A3A;
  --color-danger: #B4463D;

  --color-focus-ring: color-mix(in oklch, var(--color-primary) 45%, transparent);
}