/* Farbbruecke Website -> Panel-Token.
 *
 * Die Marketing-Seiten hatten ihr eigenes Farbsystem: fuer jede Farbe ein Paar
 * --x-dark / --x-light, Dunkel als Standard und Hell ueber rund 245 Regeln der
 * Form `html:not(.dark) .foo { ... }`. Das Panel dagegen schaltet ueber
 * [data-theme] und haelt seine Farben in Token (newcp.css).
 *
 * Statt beide Systeme zu pflegen, zeigen hier BEIDE Haelften jedes Paares auf
 * denselben Token. Damit werden die `html:not(.dark)`-Regeln zu Doppelungen
 * ohne Wirkung – sie setzen denselben Wert wie die Grundregel – und das
 * Umschalten uebernimmt der Token. partials/nav.php setzt dafuer seit dem
 * 29.08.2026 `data-theme` synchron zur Klasse `.dark`.
 *
 * `html:root` statt `:root`: die Seiten definieren ihre Variablen in einem
 * eigenen <style> im Kopf. Ohne die hoehere Spezifitaet gewaenne mal die eine,
 * mal die andere Seite – je nachdem, was spaeter im Dokument steht.
 */
html:root {
  /* Flaechen */
  --bg-dark:            var(--bg);
  --bg-light:           var(--bg);
  --card-dark:          var(--surface);
  --card-light:         var(--surface);
  --card-dark-hover:    var(--surface-2);
  --card-light-hover:   var(--surface-2);

  /* Linien */
  --border-dark:        var(--border);
  --border-light:       var(--border);
  --border-dark-soft:   var(--border);
  --border-light-soft:  var(--border);

  /* Schrift */
  --text-dark:          var(--text);
  --text-light:         var(--text);
  --muted-dark:         var(--text-muted);
  --muted-light:        var(--text-muted);
  --muted2-dark:        var(--text-faint);
  --muted2-light:       var(--text-faint);

  /* Akzent. --blue2 ist die Grundfarbe, --blue der Zustand beim Ueberfahren –
     so herum benutzen es die Seiten (.btn--primary{background:var(--blue2)},
     :hover{background:var(--blue)}). */
  --blue2:              var(--primary);
  --blue:               var(--primary-hover);
}