/* NEXUS Kanal – Design-Tokens */
:root {
  --navy: #102942;
  --aarburg: #ffdc00;
  --navy-2: #245276;
  --blue: #1769aa;
  --blue-hover: #105b97;
  --ink: #17212b;
  --muted: #687685;
  --line: #e3e9ee;
  --canvas: #f4f7f9;
  --surface: #ffffff;
  --danger: #c83f47;
  --amber: #bb7317;
  --green: #23845f;
  --violet: #6b58b8;
  --nav-text: #c8d5e1;
  --nav-muted: #819ab0;

  --text-meta: 12px;
  --text-secondary: 14px;
  --text-small: 14px;
  --text-base: 16px;
  --text-ui: 15px;
  --text-heading: 18px;
  --text-title: 34px;
  --text-title-mobile: 28px;
  --line-height-body: 1.5;

  --sidebar-width: 288px;
  --topbar-height: 78px;
  --radius: 9px;
  --radius-lg: 12px;
  --shadow-card: 0 3px 10px rgba(26, 54, 76, 0.025);
  --shadow-raise: 0 8px 20px rgba(27, 62, 88, 0.06);

  /* Abwärtskompatible Aliase für bestehende Komponenten */
  --color-canvas: var(--canvas);
  --color-surface: var(--surface);
  --color-line: var(--line);
  --color-ink-900: var(--ink);
  --color-ink-700: #3d4d5c;
  --color-ink-500: var(--muted);
  --color-accent-500: var(--blue);
  --color-accent-600: var(--blue);
  --color-accent-700: var(--blue-hover);
  --color-accent-050: #eaf3fb;
  --color-accent-100: #d7eaf6;
  --color-crit: var(--danger);
  --color-crit-bg: #fbe9ea;
  --color-warn: var(--amber);
  --color-warn-bg: #fbf1e2;
  --color-ok: var(--green);
  --color-ok-bg: #e7f5ef;
  --tb-brand: var(--blue);
  --tb-brand-hover: var(--blue-hover);
  --tb-bg: var(--canvas);
  --tb-surface: var(--surface);
  --tb-border: var(--line);
  --tb-text: var(--ink);
  --tb-text-secondary: var(--color-ink-700);
  --tb-text-muted: var(--muted);
  --tb-danger: var(--danger);
  --tb-warn: var(--amber);
  --tb-ok: var(--green);
}