/* ============================================================
   variables.css
   Basis: RGB + Alpha Variablen -> abgeleitete RGBA Farben
   - Design-Anpassungen passieren hier.
   - Navigationstexte ausschließlich über:
     --nav-text-light und --nav-text-dark
   ============================================================ */

/* ------------------------------------------------------------
   1) Grundfarben als RGB Triplets + Alpha
   ------------------------------------------------------------ */
:root {

  /* Seitenhintergründe */
  --page-bg-rgb: 24 24 26;
  --page-bg-a: 1;

  --box-bg-rgb: 255 255 255;
  --box-bg-a: 0.92;

  /* Standard-Textfarben */
  --text-rgb: 240 240 242;
  --text-a: 1;

  --text-muted-rgb: 202 204 208;
  --text-muted-a: 1;

  /* Links außerhalb der Navigation */
  --link-rgb: 182 184 188;
  --link-a: 1;

  --link-hover-rgb: 220 222 224;
  --link-hover-a: 1;

  /* Navigation: Zwei Textfarben, sonst keine */
  --nav-text-light-rgb: 245 245 245;
  --nav-text-light-a: 1;

  --nav-text-dark-rgb: 12 12 12;
  --nav-text-dark-a: 1;

  /* ----------------------------------------------------------
     2) Hauptnavigation - Ebene 0
     ---------------------------------------------------------- */
  --nav0-bg-rgb: 30 30 34;
  --nav0-bg-a: 1;

  --nav0-bg-hover-rgb: 46 46 52;
  --nav0-bg-hover-a: 1;

  --nav0-bg-active-rgb: 220 222 224;
  --nav0-bg-active-a: 1;

  --nav0-link: var(--nav-text-light);
  --nav0-link-hover: var(--nav-text-light);
  --nav0-link-active: var(--nav-text-dark);

  /* ----------------------------------------------------------
     3) Hauptnavigation - Ebene 1
     ---------------------------------------------------------- */
  --nav1-bg-rgb: 26 26 30;
  --nav1-bg-a: 1;

  --nav1-bg-hover-rgb: 40 40 46;
  --nav1-bg-hover-a: 1;

  --nav1-bg-active-rgb: 220 222 224;
  --nav1-bg-active-a: 1;

  --nav1-link: var(--nav-text-light);
  --nav1-link-hover: var(--nav-text-light);
  --nav1-link-active: var(--nav-text-dark);

  /* ----------------------------------------------------------
     4) Hauptnavigation - Ebene 2
     ---------------------------------------------------------- */
  --nav2-bg-rgb: 22 22 26;
  --nav2-bg-a: 1;

  --nav2-bg-hover-rgb: 34 34 40;
  --nav2-bg-hover-a: 1;

  --nav2-bg-active-rgb: 220 222 224;
  --nav2-bg-active-a: 1;

  --nav2-link: var(--nav-text-light);
  --nav2-link-hover: var(--nav-text-light);
  --nav2-link-active: var(--nav-text-dark);

  /* ----------------------------------------------------------
     5) Hauptnavigation - Ebene 3
     ---------------------------------------------------------- */
  --nav3-bg-rgb: 18 18 22;
  --nav3-bg-a: 1;

  --nav3-bg-hover-rgb: 30 30 36;
  --nav3-bg-hover-a: 1;

  --nav3-bg-active-rgb: 220 222 224;
  --nav3-bg-active-a: 1;

  --nav3-link: var(--nav-text-light);
  --nav3-link-hover: var(--nav-text-light);
  --nav3-link-active: var(--nav-text-dark);

  /* ----------------------------------------------------------
     6) Subnavigation in der Seitenleiste (asnav)
     ---------------------------------------------------------- */
  --asnav-bg-rgb: 244 244 246;
  --asnav-bg-a: 0.92;

  --asnav-bg-hover-rgb: 226 226 230;
  --asnav-bg-hover-a: 0.96;

  --asnav-bg-active-rgb: 30 30 34;
  --asnav-bg-active-a: 1;

  --asnav-link: var(--nav-text-dark);
  --asnav-link-hover: var(--nav-text-dark);
  --asnav-link-active: var(--nav-text-light);

  /* Sidebar Ebenen 1-3 */
  --asnav1-bg-rgb: 242 242 244;
  --asnav1-bg-a: 0.92;
  --asnav1-bg-hover-rgb: 224 224 228;
  --asnav1-bg-hover-a: 0.96;
  --asnav1-link: var(--nav-text-dark);
  --asnav1-link-hover: var(--nav-text-dark);

  --asnav2-bg-rgb: 240 240 242;
  --asnav2-bg-a: 0.92;
  --asnav2-bg-hover-rgb: 222 222 226;
  --asnav2-bg-hover-a: 0.96;
  --asnav2-link: var(--nav-text-dark);
  --asnav2-link-hover: var(--nav-text-dark);

  --asnav3-bg-rgb: 238 238 240;
  --asnav3-bg-a: 0.92;
  --asnav3-bg-hover-rgb: 220 220 224;
  --asnav3-bg-hover-a: 0.96;
  --asnav3-link: var(--nav-text-dark);
  --asnav3-link-hover: var(--nav-text-dark);

  --asnavwrap-bg-rgb: 255 255 255;
  --asnavwrap-bg-a: 0.75;

  /* Kompatibilität */
  --asnav-nr-bg: var(--asnav-bg);
  --asnav-nr-hover-bg: var(--asnav-bg-hover);
  --asnav-nr-bg-hover: var(--asnav-bg-hover);
  --asnav-nr-active-bg: var(--asnav-bg-active);
  --asnav-nr-link: var(--asnav-link);
  --asnav-nr-hover-link: var(--asnav-link-hover);
  --asnav-nr-link-hover: var(--asnav-link-hover);
  --asnav-nr-active-link: var(--asnav-link-active);

  /* ----------------------------------------------------------
     7) Sonstiges
     ---------------------------------------------------------- */
  --shadow-rgb: 0 0 0;
  --shadow-a: 0.25;
}

/* ------------------------------------------------------------
   8) Abgeleitete RGBA Farben
   ------------------------------------------------------------ */
:root {

  --page-bg: rgb(var(--page-bg-rgb) / var(--page-bg-a));
  --box-bg: rgb(var(--box-bg-rgb) / var(--box-bg-a));

  --text: rgb(var(--text-rgb) / var(--text-a));
  --text-muted: rgb(var(--text-muted-rgb) / var(--text-muted-a));

  --link: rgb(var(--link-rgb) / var(--link-a));
  --link-hover: rgb(var(--link-hover-rgb) / var(--link-hover-a));

  --nav-text-light: rgb(var(--nav-text-light-rgb) / var(--nav-text-light-a));
  --nav-text-dark: rgb(var(--nav-text-dark-rgb) / var(--nav-text-dark-a));

  --nav0-bg: rgb(var(--nav0-bg-rgb) / var(--nav0-bg-a));
  --nav0-bg-hover: rgb(var(--nav0-bg-hover-rgb) / var(--nav0-bg-hover-a));
  --nav0-bg-active: rgb(var(--nav0-bg-active-rgb) / var(--nav0-bg-active-a));
  --nav0-hover-bg: var(--nav0-bg-hover);
  --nav0-active-bg: var(--nav0-bg-active);

  --nav1-bg: rgb(var(--nav1-bg-rgb) / var(--nav1-bg-a));
  --nav1-bg-hover: rgb(var(--nav1-bg-hover-rgb) / var(--nav1-bg-hover-a));
  --nav1-bg-active: rgb(var(--nav1-bg-active-rgb) / var(--nav1-bg-active-a));
  --nav1-hover-bg: var(--nav1-bg-hover);
  --nav1-active-bg: var(--nav1-bg-active);

  --nav2-bg: rgb(var(--nav2-bg-rgb) / var(--nav2-bg-a));
  --nav2-bg-hover: rgb(var(--nav2-bg-hover-rgb) / var(--nav2-bg-hover-a));
  --nav2-bg-active: rgb(var(--nav2-bg-active-rgb) / var(--nav2-bg-active-a));
  --nav2-hover-bg: var(--nav2-bg-hover);
  --nav2-active-bg: var(--nav2-bg-active);

  --nav3-bg: rgb(var(--nav3-bg-rgb) / var(--nav3-bg-a));
  --nav3-bg-hover: rgb(var(--nav3-bg-hover-rgb) / var(--nav3-bg-hover-a));
  --nav3-bg-active: rgb(var(--nav3-bg-active-rgb) / var(--nav3-bg-active-a));
  --nav3-hover-bg: var(--nav3-bg-hover);
  --nav3-active-bg: var(--nav3-bg-active);

  --asnav-bg: rgb(var(--asnav-bg-rgb) / var(--asnav-bg-a));
  --asnav-bg-hover: rgb(var(--asnav-bg-hover-rgb) / var(--asnav-bg-hover-a));
  --asnav-bg-active: rgb(var(--asnav-bg-active-rgb) / var(--asnav-bg-active-a));
  --asnavwrap-bg: rgb(var(--asnavwrap-bg-rgb) / var(--asnavwrap-bg-a));
  --asnav-hover-bg: var(--asnav-bg-hover);

  --asnav1-bg: rgb(var(--asnav1-bg-rgb) / var(--asnav1-bg-a));
  --asnav1-hover-bg: rgb(var(--asnav1-bg-hover-rgb) / var(--asnav1-bg-hover-a));

  --asnav2-bg: rgb(var(--asnav2-bg-rgb) / var(--asnav2-bg-a));
  --asnav2-hover-bg: rgb(var(--asnav2-bg-hover-rgb) / var(--asnav2-bg-hover-a));

  --asnav3-bg: rgb(var(--asnav3-bg-rgb) / var(--asnav3-bg-a));
  --asnav3-hover-bg: rgb(var(--asnav3-bg-hover-rgb) / var(--asnav3-bg-hover-a));

  --shadow: rgb(var(--shadow-rgb) / var(--shadow-a));
}

/* ------------------------------------------------------------
   9) Basis-Zuweisungen
   ------------------------------------------------------------ */
html, body { background: var(--page-bg); color: var(--text); }
a { color: var(--link); }
a:hover, a:focus { color: var(--link-hover); }