:root {
  /* Corporate Design – Hausfarben */
  --color-primary: #e6332a;
  --color-anthracite: #1c2b39;
  --color-grey-blue: #5f7b8e;
  --color-white: #ffffff;

  /* Abgeleitete Semantik */
  --color-text: var(--color-anthracite);
  --color-muted: var(--color-grey-blue);
  --color-border: rgba(95, 123, 142, 0.35);
  --color-border-strong: var(--color-grey-blue);
  --color-bg: #f4f6f8;
  --color-surface: var(--color-white);
  --color-surface-soft: rgba(95, 123, 142, 0.08);
  --color-surface-muted: rgba(95, 123, 142, 0.06);

  /* Status (CD-Palette) */
  --color-status-open-bg: var(--color-grey-blue);
  --color-status-open-text: var(--color-white);
  --color-status-progress-bg: var(--color-anthracite);
  --color-status-progress-text: var(--color-white);
  --color-status-critical-bg: var(--color-primary);
  --color-status-critical-text: var(--color-white);
  --color-status-done-bg: var(--color-white);
  --color-status-done-text: var(--color-anthracite);
  --color-status-done-border: var(--color-grey-blue);

  /* Semantische Aliase (Erfolg/Warnung/Fehler – CD-abgeleitet) */
  --ok: var(--color-grey-blue);
  --ok-bg: rgba(95, 123, 142, 0.12);
  --warn: var(--color-anthracite);
  --warn-bg: rgba(28, 43, 57, 0.08);
  --bad: var(--color-primary);
  --bad-bg: rgba(230, 51, 42, 0.1);
  --info: var(--color-grey-blue);
  --info-bg: rgba(95, 123, 142, 0.1);

  /* Typografie */
  --font-family-base: "Lato", Arial, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 24px;
  --font-size-xl: 32px;
  --font-size-xxl: 40px;

  /* Spacing (8px-Raster) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  /* Radius & Schatten */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-sm: 0 2px 8px rgba(28, 43, 57, 0.1);
  --shadow-md: 0 4px 16px rgba(28, 43, 57, 0.14);
  --shadow: var(--shadow-md);

  /* Legacy-Aliases (bestehende styles.css / portal.css) */
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-soft: var(--color-surface-soft);
  --surface-muted: var(--color-surface-muted);
  --line: var(--color-border);
  --border: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --accent: var(--color-primary);
  --accent-dark: var(--color-anthracite);
  --primary: var(--color-primary);
  --primary-dark: var(--color-anthracite);
  --radius: var(--radius-md);
}