/* ══════════════════════════════════════════════════════════════
   Theme: Light (Slack System/Hell - weisse Sidebar)
   Heller, sauberer Look wie Slack unter Windows 11 mit
   System-Theme. Sidebar ist hellgrau, nicht Aubergine.
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── Hintergründe ─────────────────────────────────────────── */
  --bg-app: #f8f8f8;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f0f0f0;
  --bg-surface-hover: #e8e8e8;
  --bg-elevated: #f4f4f5;
  --bg-input: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.5);

  /* ── Navigation (helle Sidebar wie Windows System-Theme) ──── */
  --nav-bg: #f2f2f2;
  --nav-text: #000000;
  --nav-item-color: rgb(0, 0, 0);
  --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(0, 122, 90, 0.1);
  --accent-text: #1264a3;

  /* ── Text ───────────────────────────────────────────────────── */
  --text-primary: #1d1c1d;
  --text-secondary: #616061;
  --text-tertiary: #868686;
  --text-on-accent: #ffffff;

  /* ── Borders ───────────────────────────────────────────────── */
  --border-default: #dddddd;
  --border-strong: #c4c4c4;
  --border-input: #c4c4c4;

  /* ── Signal-Farben (Slack-Palette) ─────────────────────────── */
  --signal-red: #e01e5a;
  --signal-red-deep: #b8103c;
  --signal-red-light: #fec5d4;
  --signal-red-bg: #fee8ef;
  --signal-red-border: #e01e5a;
  --signal-yellow: #e6a017;
  --signal-yellow-deep: #b87a0a;
  --signal-yellow-light: #fef1c5;
  --signal-yellow-bg: #fef6e0;
  --signal-yellow-border: #e6a017;
  --signal-green: #1e9c5c;
  --signal-green-deep: #157a45;
  --signal-green-light: #d4f5e4;
  --signal-green-bg: #e8faf0;
  --signal-green-border: #1e9c5c;


  /* ── 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: #ffffff;
  --btn-secondary-text: var(--text-primary);
  --btn-secondary-border: var(--border-strong);
  --btn-secondary-hover-bg: var(--bg-surface-alt);

  --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: #1264a3;
  --input-focus-ring: rgba(18, 100, 163, 0.15);
  --input-disabled-bg: var(--bg-surface-alt);
  --input-disabled-opacity: 0.5;

  /* ── Links ─────────────────────────────────────────────────── */
  --link-color: #1264a3;
  --link-hover-color: #0b4f86;

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

  /* ── Badges / Tags ─────────────────────────────────────────── */
  --badge-bg: rgba(18, 100, 163, 0.1);
  --badge-text: #1264a3;
  --tag-bg: rgba(18, 100, 163, 0.1);
  --tag-text: #1264a3;

  /* ── Schatten ──────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.15);

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