:root {
  /* ===== Brand ===== */
  --brand-blue-600: #2563eb; /* Brand Blue (Primär) */
  --brand-blue-700: #1d4ed8; /* Hover/Active */
  --brand-blue-50: #eff6ff; /* Tönung für Chips/Badges */
  --brand-blue-200: #bfdbfe;

  /* ===== Neutrals (kühl) ===== */
  --bg: #f8fafc; /* Seitenhintergrund */
  --surface: #ffffff; /* Karten/Panele */
  --border: #e5e7eb;
  --text: #0f172a; /* Haupttext */
  --text-muted: #64748b; /* Sekundärtext */

  /* ===== Status (ruhig, AA-geeignet) ===== */
  --success-fg: #065f46;
  --success-bg: #ecfdf5;
  --success-bd: #a7f3d0;
  --warning-fg: #b45309;
  --warning-bg: #fffbeb;
  --warning-bd: #fde68a;
  --info-fg: #0369a1;
  --info-bg: #f0f9ff;
  --info-bd: #bae6fd;
  --danger-fg: #b91c1c;
  --danger-bg: #fef2f2;
  --danger-bd: #fecaca;

  /* ===== Buttons / Links ===== */
  --btn-fg: #ffffff;
  --btn-bg: var(--brand-blue-600);
  --btn-bg-hover: var(--brand-blue-700);

  --link: var(--brand-blue-600);
  --link-hover: var(--brand-blue-700);

  /* ===== Chips (z. B. „Versendet“) ===== */
  --chip-blue-fg: var(--brand-blue-700);
  --chip-blue-bg: var(--brand-blue-50);
  --chip-blue-bd: var(--brand-blue-200);
}

/* Basis */
html,
body {
  background: var(--bg);
  color: var(--text);
}

/* Karten / Paneele */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* Sekundärtext */
.muted {
  color: var(--text-muted);
}

/* Links (keine Überschreibung bei Button-ähnlichen Ankern) */
a:not([role="button"]):not(.button--primary):not(.button--secondary):not(
    .button--emphasis
  ):not(.btn):not([class*="bg-"]) {
  color: var(--link);
}
a:not([role="button"]):not(.button--primary):not(.button--secondary):not(
    .button--emphasis
  ):not(.btn):not([class*="bg-"]):hover {
  color: var(--link-hover);
}

/* Primärbutton: ruhig, ohne Verläufe */
.button--primary,
button.button--primary {
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
}
.button--primary:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
}

/* Sekundärbutton: neutral */
.button--secondary,
button.button--secondary {
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--border);
}

/* Status-Chips (getönt, nicht knallig) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.875rem;
  line-height: 1;
}
.chip--blue {
  color: var(--chip-blue-fg);
  background: var(--chip-blue-bg);
  border-color: var(--chip-blue-bd);
}
.chip--success {
  color: var(--success-fg);
  background: var(--success-bg);
  border-color: var(--success-bd);
}
.chip--warning {
  color: var(--warning-fg);
  background: var(--warning-bg);
  border-color: var(--warning-bd);
}
.chip--info {
  color: var(--info-fg);
  background: var(--info-bg);
  border-color: var(--info-bd);
}
.chip--danger {
  color: var(--danger-fg);
  background: var(--danger-bg);
  border-color: var(--danger-bd);
}

/* Progressbar (ruhig) */
.progress {
  height: 8px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: var(--brand-blue-600);
}

/* Fokus-Ring */
:where(button, [href], input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-blue-600);
  outline-offset: 2px;
}