/* MERZ — Farben. Quelle: Figma "Merz KI" Variables + Zählung im Design. */
:root {
  /* Basis */
  --merz-rot: rgb(181, 27, 38);            /* Primärfarbe "Merz Rot" */
  --merz-blau: rgb(0, 139, 197);           /* "Merz Blau" — Footer, Stat-Kacheln, Akzent */
  --merz-dunkelgrau: rgb(72, 72, 71);      /* "Textfarbe" — Fließtext & Überschriften */
  --merz-hellgrau: rgb(243, 243, 243);     /* Sektionshintergründe, Kartenflächen */
  --merz-umrandung: rgb(175, 175, 175);    /* Kartenränder, Input-Border */
  --merz-weiss: rgb(255, 255, 255);
  --merz-schwarz: rgb(0, 0, 0);            /* Topbar */
  --pce-logo-rot: rgb(227, 6, 19);         /* PCE-Quadrat im Logo */
  --grau-platzhalter: rgb(217, 217, 217);  /* Bild-Fallbackfläche */

  /* Semantisch */
  --text-body: var(--merz-dunkelgrau);
  --text-heading: var(--merz-dunkelgrau);
  --text-eyebrow: var(--merz-rot);
  --text-invers: var(--merz-weiss);
  --surface-page: var(--merz-weiss);
  --surface-section: var(--merz-hellgrau);
  --surface-card: var(--merz-weiss);
  --surface-accent: var(--merz-rot);
  --surface-footer: var(--merz-blau);
  --surface-topbar: var(--merz-schwarz);
  --border-card: var(--merz-umrandung);
  --border-input: var(--merz-umrandung);
  --action-primary: var(--merz-rot);
  --action-secondary: var(--merz-blau);
  --link-color: var(--merz-rot);
}