/* ══════════════════════════════════════════════════════════════
   Theme: Dark (Slack-inspiriert)
   Warme, dunkle Grautöne mit grünem Akzent.
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── Hintergründe ─────────────────────────────────────────── */
  --bg-app: #1a1d21;
  --bg-surface: #222529;
  --bg-surface-alt: #2c2d31;
  --bg-surface-hover: #35373b;
  --bg-input: #1a1d21;
  --bg-overlay: rgba(0, 0, 0, 0.65);

  /* ── Navigation (Sidebar) ──────────────────────────────────── */
  --nav-bg: #19171d;
  --nav-text: #d1d2d3;
  --nav-item-color: #cfc3cf;
  --nav-item-hover-bg: #0c45704d;
  --nav-item-active-bg: #0c4570;
  --nav-item-active-color: #ffffff;
  --nav-item-active-border: #1164a3;

  /* ── Akzent (Slack-Grün + Blau-Links) ──────────────────────── */
  --accent: #1062a5;
  --accent-hover: #56b3ff;
  --accent-soft: rgba(150, 184, 255, 0.15);
  --accent-text: #1d9bd1;

  /* ── Text ───────────────────────────────────────────────────── */
  --text-primary: #d1d2d3;
  --text-secondary: #ababad;
  --text-tertiary: #8b8b8d;
  --text-on-accent: #ffffff;

  /* ── Borders ───────────────────────────────────────────────── */
  --border-default: #35373b;
  --border-strong: #49494e;
  --border-input: #49494e;

  /* ── Signal-Farben ─────────────────────────────────────────── */
  --signal-red: #e01e5a;
  --signal-red-deep: #c4133f;
  --signal-red-light: #fce4ec;
  --signal-red-bg: #fce4ec;
  --signal-red-border: #f48fb1;
  --signal-yellow: #ecb22e;
  --signal-yellow-deep: #c8960e;
  --signal-yellow-light: #fff8e1;
  --signal-yellow-bg: #fff3c4;
  --signal-yellow-border: #ffe082;
  --signal-green: #2eb67d;
  --signal-green-deep: #1a9c64;
  --signal-green-light: #e0f7ec;
  --signal-green-bg: #c8f7dc;
  --signal-green-border: #81c995;

  /* ── Surface-Text ──────────────────────────────────────────── */
  --surface-text: var(--text-primary);
  --surface-text-secondary: var(--text-secondary);

  /* ── Buttons ───────────────────────────────────────────────── */
  --btn-primary-bg: #0c4570;
  --btn-primary-text: #ffffff;
  --btn-primary-border: #135a91;
  --btn-primary-hover-bg: #1275c7;

  --btn-secondary-bg: var(--bg-surface-alt);
  --btn-secondary-text: var(--text-primary);
  --btn-secondary-border: var(--border-default);
  --btn-secondary-hover-bg: var(--bg-surface-hover);

  --btn-danger-bg: #e01e5a;
  --btn-danger-text: #ffffff;
  --btn-danger-border: #c4133f;
  --btn-danger-hover-bg: #c4133f;

  /* ── Inputs ────────────────────────────────────────────────── */
  --input-bg: var(--bg-input);
  --input-text: var(--text-primary);
  --input-border: var(--border-strong);
  --input-placeholder: var(--text-tertiary);
  --input-focus-border: #115f807c;
  --input-focus-ring: rgba(29, 155, 209, 0.2);
  --input-disabled-bg: var(--bg-surface-alt);
  --input-disabled-opacity: 0.5;

  /* ── Links ─────────────────────────────────────────────────── */
  --link-color: #1d9bd1;
  --link-hover-color: #4fc3f7;

  /* ── Modals ────────────────────────────────────────────────── */
  --modal-bg: var(--bg-surface);
  --modal-text: var(--text-primary);
  --modal-text-secondary: var(--text-secondary);
  --modal-header-bg: #1a1d21;
  --modal-header-text: var(--text-primary);
  --modal-border: var(--border-default);

  /* ── Badges / Tags ─────────────────────────────────────────── */
  --badge-bg: rgba(29, 155, 209, 0.15);
  --badge-text: #1d9bd1;
  --tag-bg: rgba(29, 155, 209, 0.15);
  --tag-text: #1d9bd1;

  /* ── Schatten ──────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.6);

  /* ── Rundungen ─────────────────────────────────────────────── */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-full: 999px;
}