/* ══════════════════════════════════════════════════════════════
   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: #F1F2F3;
  --bg-surface: #ffffff;
  --bg-surface-alt: #eeeff0;
  --bg-surface-hover: rgb(193, 209, 231);
  --bg-elevated: #ffffff;
  --bg-input: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.5);

  /* ── Navigation (helle Sidebar wie Windows System-Theme) ──── */
  --nav-bg: #2A2C2E;
  --nav-text: #ffffff;
  --nav-item-color: #ffffff;
  --nav-item-hover-bg: #ffffff;
  --nav-item-active-bg: #ffffff;
  --nav-item-active-color: #2A2C2E;
  --nav-item-active-border: #4a6fa5;
  
  /* ── Akzent ───────────────────────────────────────────────── */
  --accent: #0055A5;
  --accent-hover: #1e3a5f60;
  --accent-soft: #1e3a5f9f;
  --accent-text: #EEEFF0;

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

  /* ── Borders ───────────────────────────────────────────────── */
  --border-default: var(--text-tertiary);
  --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;

  /* ── Avatare / Status ─────────────────────────────────────── */
  --avatar-bg: var(--signal-green);
  --avatar-icon-color: var(--text-on-accent-soft);
  --avatar-text-color: var(--text-on-accent-strong);
  --status-active-bg: var(--signal-green-bg);
  --status-active-color: var(--signal-green);
  --status-active-border: var(--signal-green-border);
  --avatar-palette-1: var(--signal-green);
  --avatar-palette-2: var(--accent);
  --avatar-palette-3: var(--accent-text);
  --avatar-palette-4: var(--signal-yellow);
  --avatar-palette-5: var(--signal-red);
  --avatar-palette-6: var(--signal-green-deep);
  --avatar-palette-7: var(--link-color);
  --avatar-palette-8: var(--signal-yellow-deep);
  --avatar-palette-9: var(--signal-red-deep);
  --avatar-palette-10: var(--nav-item-active-border);

  /* ── Brand-Token ──────────────────────────────────────────── */
  --brand-google-blue: #4285f4;
  --brand-google-green: #34a853;
  --brand-google-yellow: #fbbc05;
  --brand-google-red: #ea4335;


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

  /* ── Buttons ───────────────────────────────────────────────── */
  --btn-primary-bg: var(--accent);
  --btn-primary-text:#ffffff;
  --btn-primary-border: var(--accent);
  --btn-primary-hover-bg: #3263AD;

  --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: #1264a3b7;
  --input-focus-ring: #1264a3b7;
  --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: #ffffff;
  --modal-text-secondary: #ffffff;
  --modal-header-bg: var(--accent);
  --modal-header-text: #ffffff;
  --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);
  --scroll-shadow-color: rgba(0, 0, 0, 0.3);

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

  /* ── Tabs ──────────────────────────────────────────────────── */
  /* Underline-Tabs (z.B. Mitarbeiter-Detail) */
  --tab-color:             var(--text-tertiary);       /* inaktiv */
  --tab-color-hover:       var(--text-primary);       /* hover   */
  --tab-active-color:      var(--accent);       /* aktiv – Text */
  --tab-active-border:     var(--accent);       /* aktiv – Unterstrich */
  --tab-bar-border:        #c4c4c4;       /* Trennlinie unter der Tab-Leiste */
  /* Pill-Tabs (Filter-Tabs in der Mitarbeiterliste) */
  --tab-pill-bg-hover:      var(--nav-item-hover-bg);
  --tab-pill-bg-active:     var(--nav-item-hover-bg);
  --tab-pill-color-hover:  #1d1c1d;
  --tab-pill-color-active: #1d1c1d;
}