/**
 * TJV – Harmonische Farbpalette
 *
 * Primär:  #FF0000
 * Neutrale Grautöne, die zu reinem Rot passen
 */
:root {
  /* --- Rot --- */
  --ibl-color-brand: #ff0000;
  --ibl-color-brand-dark: #cc0000;
  --ibl-color-brand-deep: #990000;
  --ibl-color-brand-soft: #ffe8e8;
  --ibl-color-brand-muted: #ffb3b3;
  --ibl-color-focus: #ff0000;

  /* --- Graustufen hell → dunkel --- */
  --ibl-gray-50: #fafafa;
  --ibl-gray-100: #f2f2f2;
  --ibl-gray-200: #e6e6e6;
  --ibl-gray-300: #d1d1d1;
  --ibl-gray-400: #b0b0b0;
  --ibl-gray-500: #8a8a8a;
  --ibl-gray-600: #6b6b6b;
  --ibl-gray-700: #4a4a4a;
  --ibl-gray-800: #2e2e2e;
  --ibl-gray-900: #1a1a1a;
  --ibl-gray-950: #0f0f0f;

  /* --- Layout-Semantik --- */
  --ibl-color-ink: var(--ibl-gray-900);
  --ibl-color-muted: var(--ibl-gray-600);
  --ibl-color-surface: #ffffff;
  --ibl-color-surface-soft: var(--ibl-gray-100);
  --ibl-color-border: var(--ibl-gray-300);
  --ibl-color-dark: var(--ibl-gray-900);
  --ibl-color-dark-60: rgba(26, 26, 26, 0.6);

  /* --- Footer (explizit am Footer, damit Layout-Defaults nicht gewinnen) --- */
  --ibl-footer-bg: var(--ibl-gray-800);
  --ibl-footer-bottom-bg: var(--ibl-gray-900);
  --ibl-footer-text: var(--ibl-gray-50);
  --ibl-footer-muted: var(--ibl-gray-300);
  --ibl-footer-link: var(--ibl-gray-50);
  --ibl-footer-link-hover: var(--ibl-color-brand);
}

.ibl-footer {
  --ibl-footer-bg: var(--ibl-gray-800);
  --ibl-footer-bottom-bg: var(--ibl-gray-900);
  --ibl-footer-text: var(--ibl-gray-50);
  --ibl-footer-muted: var(--ibl-gray-300);
  --ibl-footer-link: var(--ibl-gray-50);
  --ibl-footer-link-hover: var(--ibl-color-brand);
  color: var(--ibl-footer-text);
  background: var(--ibl-footer-bg);
}

.ibl-footer__bottom {
  background: var(--ibl-footer-bottom-bg);
}