/*
 * Farben des Management-Portals - uebernommen aus dem Connect2 SLZ-Portal (portal-design-vorlage, Stand 25.09.2026).
 * Einzige Stelle fuer Farben in hell und dunkel. Das Skript im <head> von base.html setzt immer data-theme="light"
 * oder "dark" am <html>. Bausteine (portal.css) verwenden nur diese Variablen.
 * Kontraste (WCAG) wurden im SLZ-Portal geprueft: Text >= 4,5:1, grosse Schrift >= 3:1.
 */
:root {
  color-scheme: light;

  /* Flaechen */
  --surface-page: #f4f7f7;
  --surface: #ffffff;
  --surface-sunken: #f5f8f8;
  --surface-hover: #eef4f5;
  --surface-strong: #e8f0f1;
  --surface-input: #ffffff;

  /* Schrift */
  --text: #1f2528;
  --text-strong: #17292e;
  --text-muted: #56696e;
  --text-accent: #29484e;
  --accent-text: #3d6b72;
  --link: #2f5a61;
  --link-hover: #1f4146;

  /* Linien */
  --border: #ccd9db;
  --border-soft: #e3eaeb;
  --border-strong: #82979b;
  --border-input: #82979b;

  /* Marke und Bedienelemente */
  --primary: #4f747a;
  --primary-hover: #3b5c61;
  --on-primary: #ffffff;
  --primary-soft: #e6eff0;
  --focus-ring: #2f6f78;

  /* Status */
  --success-bg: #e1f5e9;
  --success-fg: #1d5c37;
  --success-border: #b6dcc5;
  --warning-bg: #fff1d8;
  --warning-fg: #7a4400;
  --warning-border: #efd29a;
  --danger-bg: #fde7e7;
  --danger-fg: #9b2226;
  --danger-border: #efc4c4;
  --danger-solid: #c62f2f;
  --info-bg: #e4eff6;
  --info-fg: #245a70;
  --info-border: #c3d9e6;
  --neutral-bg: #e8f0f1;
  --neutral-fg: #29484e;

  /* Schatten */
  --shadow-sm: 0 8px 24px rgba(28, 54, 60, 0.07);
  --shadow-lg: 0 18px 45px rgba(31, 37, 40, 0.11);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --surface-page: #0d1214;
  --surface: #172125;
  --surface-sunken: #111b1e;
  --surface-hover: #1b2a2f;
  --surface-strong: #223439;
  --surface-input: #10191c;

  --text: #edf5f6;
  --text-strong: #ffffff;
  --text-muted: #9fb3b8;
  --text-accent: #b8d5da;
  --accent-text: #8fc3ca;
  --link: #b8d5da;
  --link-hover: #d7eef2;

  --border: #33484d;
  --border-soft: #26383d;
  --border-strong: #5b777e;
  --border-input: #587378;

  --primary: #9fc2c8;
  --primary-hover: #c0d9dd;
  --on-primary: #071012;
  --primary-soft: #223439;
  --focus-ring: #9fd6de;

  --success-bg: #15301f;
  --success-fg: #8fe0ae;
  --success-border: #2c5a3d;
  --warning-bg: #3a2a0c;
  --warning-fg: #f5c46b;
  --warning-border: #6b5020;
  --danger-bg: #3b1d20;
  --danger-fg: #ff9b9b;
  --danger-border: #6e3035;
  --danger-solid: #b83232;
  --info-bg: #15303a;
  --info-fg: #9fd0e6;
  --info-border: #2b5566;
  --neutral-bg: #223439;
  --neutral-fg: #d8ecef;

  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.26);
  --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.34);
}

/* Bisherige Variablennamen des Management-Portals zeigen auf die neuen Werte (Inline-Styles in Vorlagen). */
:root {
  --bg: var(--surface-page);
  --card: var(--surface);
  --muted: var(--text-muted);
  --accent: var(--primary);
  --accent-soft: var(--primary-soft);
  --danger: var(--danger-fg);
  --ok: var(--success-fg);
  --warn: var(--warning-fg);
  --radius: 6px;
  --shadow: var(--shadow-sm);
}