/* =========================
   DESIGN TOKENS
   -------------------------
   Zentrale Variablen für:
   - Farben
   - Abstände
   - Größen
   ========================= */

:root {
  --color-bg: #000;
  --color-fg: #fff;
  --color-glass: rgba(0,0,0,.55);
  --color-overlay: rgba(0,0,0,.72);
  --color-lightbox: rgba(0,0,0,.95);

  --color-border-subtle: rgba(255,255,255,.2);
  --color-control-bg: rgba(0,0,0,.35);
  --color-control-hover: rgba(0,0,0,.55);

  --color-link-bg: rgba(80,120,255,.25);
  --color-link-border: rgba(150,180,255,.4);
  --color-link-bg-hover: rgba(120,160,255,.35);

  --color-warning: #ffda8a;
  --color-error: #ff7b72;
  --color-loading: #91c9ff;
  --color-offline: #ffcf66;
  --color-summary: rgba(255,255,255,.10);

  --font-family-base: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  --font-size-topbar-title: 14px;
  --font-size-topbar-meta: 12px;
  --font-size-overlay: 13px;
  --font-size-status-badge: 11px;
  --font-size-summary: 11px;
  --font-size-links-title: 16px;
  --font-size-link-btn: 16px;
  --font-size-lightbox-nav: 30px;

  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 18px;

  --topbar-height: 40px;
  --nav-size: 44px;
  --icon-btn-size: 34px;
  --content-max-width: 520px;

  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --safe-top: env(safe-area-inset-top,0px);
  --safe-bottom: env(safe-area-inset-bottom,0px);

  --transition-fast: .15s ease;
  --transition-normal: .2s ease;
  --transition-carousel: .18s ease-out;

  --z-lightbox: 9999;
  --z-lightbox-nav: 10000;
  --z-thumbbar: 5000;
  --z-dim: 4000;
}