/* ============================================================
   variables.css — Feste CSS-Variablen
   WICHTIG: Keine Backgrounds, Borders, Text-Farben hier —
   diese kommen dynamisch via theme.js
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&family=Syne:wght@400;500;600;700;800&display=swap");

:root {
  /* ── Fonts ─────────────────────────────────────────────── */
  --font-heading: "Syne", sans-serif;
  --font-subheading: "Syne", sans-serif;
  --font-body: "IBM Plex Mono", monospace;
  --font-mono: "IBM Plex Mono", monospace;
  --font-ui: "Syne", sans-serif;

  /* ── Status-Farben (fest, nicht änderbar) ──────────────── */
  --yellow: #f5c400;
  --blue: #4a9eff;
  --green: #00e5a0;
  --green2: #00b87a;
  --red: #e24b4a;

  /* ── Status-Farben gedimmt (fest) ──────────────────────── */
  --yellow-dim: #f5c40014;
  --blue-dim: #4a9eff14;
  --green-dim: #00e5a014;
  --red-dim: #e24b4a14;

  /* ── Spacing ───────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Border Radius ─────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ── Shell-Maße ────────────────────────────────────────── */
  --topbar-height: 48px;
  --sidebar-width: 260px;

  /* ── Transitions ───────────────────────────────────────── */
  --transition-fast: 120ms ease;
  --transition-normal: 220ms ease;
  --transition-slow: 380ms ease;

  /* ── Z-Index ───────────────────────────────────────────── */
  --z-base: 1;
  --z-topbar: 100;
  --z-overlay: 200;
  --z-sidebar: 300;
  --z-modal: 400;
  --z-toast: 500;
}