/*
  Design-Tokens — 1:1 aus design-guidelines.pdf, Kapitel 5
  "Design-Tokens für die Implementierung". Nicht eigenständig verändern;
  Quelle der Wahrheit ist der freigegebene Styleguide.
*/
:root {
  --brand-anthracite: #3a3e42;
  --brand-cyan: #2fb8cc;
  --brand-teal: #0e7c8c;

  --bg-base: #ffffff;
  --bg-subtle: #f5f7f8;
  --bg-muted: #ecf1f3;
  --bg-inverse: #23282c;

  --border: #e2e8ea;
  --border-strong: #c7d2d7;

  --text-primary: #1c2024;
  --text-body: #4e565c;
  --text-muted: #6b757c;
  --text-on-dark: #c3cbd0;

  --success: #1e8e5a;
  --warning: #b7791f;
  --error: #c0392b;
  --info: #0e7c8c;

  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --radius-0: 0;
  --radius-1: 2px;

  --shadow-overlay: 0 8px 24px rgba(28, 32, 36, 0.1);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-30: 120px;

  --container: 1200px;
  --container-read: 800px;
  --container-form: 640px;
  --page-max: 1440px;

  --dur-fast: 160ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);

  --header-h: 80px;
}