/* HUDDLE-Theme fuer Twenty
 * ==================================================================
 * Twenty zeichnet seine gesamte Oberflaeche aus rund 1.000
 * CSS-Variablen mit dem Praefix --t-, die als Klasse .light bzw.
 * .dark am Dokument haengen und aus einer Design-Token-Quelle erzeugt
 * werden. Diese Datei setzt einige davon neu. Damit faerbt sich das
 * ganze CRM um, ohne eine Zeile Anwendungscode: das
 * Standard-Image bleibt unangetastet, die Datei wird beim Ausliefern
 * hinter Twentys eigenes Stylesheet gehaengt (siehe
 * docs/theme-deploy.md).
 *
 * `html .light` statt `.light`: bei gleicher Spezifitaet entscheidet
 * die Ladereihenfolge, und die ist Glueckssache. Hoehere Spezifitaet
 * gewinnt verlaesslich.
 *
 * Was hier nicht steht, bleibt Twentys Standard. Das ist Absicht --
 * je weniger Variablen wir anfassen, desto weniger kann ein Update
 * kaputtmachen.
 *
 * Geprueft gegen Twenty v2.41 an crm.huddle.sport.
 */

html .light {
  /* Flaechen: ein Hauch Blau im Grau statt reinem Neutralgrau. Der
   * Unterschied ist winzig und wirkt genau deshalb nicht bunt. */
  --t-background-secondary: #fbfbfd;
  --t-background-tertiary: #f1f2f7;
  --t-gray-scale-gray3: #f4f5f9;

  --t-border-color-light: #edeef4;
  --t-border-color-medium: #e2e4ee;
  --t-border-color-strong: #c9cddd;

  /* Akzent: Twenty benutzt ihn fuer Auswahl, Fokus und aktive Zeilen.
   * Die Abstufungen muessen zusammenpassen, sonst leuchtet die halbe
   * Tabelle. */
  --t-accent-primary: #cfd5ee;
  --t-accent-secondary: #dde1f2;
  --t-accent-tertiary: #eaedf7;
  --t-accent-quaternary: #f5f6fc;
  --t-accent-accent3570: #2f3a8f;
  --t-accent-accent4060: #2f3a8f;
}

/* Die Navigationsleiste in Hausfarbe -- die einzige Flaeche, die
 * wirklich nach HUDDLE aussehen soll. Alles andere bleibt ruhig: ein
 * CRM, in dem jede Flaeche um Aufmerksamkeit kaempft, ermuedet nach
 * einer Stunde.
 *
 * ACHTUNG, hier sitzt die einzige Stelle, die ein Twenty-Update
 * treffen kann: die Leiste hat weder eigene Klasse noch Kennung --
 * die Klassennamen sind generiert (s1nbwame, slp6lnv ...) und
 * wechseln mit jedem Build. Stabil ist nur die Struktur:
 *
 *   #root > Layout > Seitencontainer > [Navigationsleiste, Hauptteil]
 *
 * Deshalb der Kindselektor. Wenn Twenty diese Schachtelung aendert,
 * bleibt die Leiste hell -- unschoen, aber nichts geht kaputt. Nach
 * jedem Update also einmal hinsehen.
 *
 * Die Variablen werden hier erneut gesetzt und nicht ueberschrieben:
 * innerhalb der Leiste gilt Weiss auf Navy, ausserhalb Twentys
 * Standard. */
html #root > div:first-child > div > div:first-child {
  background: #202867;

  --t-font-color-primary: #ffffff;
  --t-font-color-secondary: #c2c9ea;
  --t-font-color-tertiary: #97a0cd;
  --t-font-color-light: #828cc0;
  --t-font-color-extra-light: #6f79ab;

  /* Twenty faerbt Hover und aktiven Eintrag mit schwarzen
   * Transparenzen ein. Auf Navy sind die unsichtbar, also weisse. */
  --t-background-transparent-lighter: rgba(255, 255, 255, 0.05);
  --t-background-transparent-light: rgba(255, 255, 255, 0.08);
  --t-background-transparent-medium: rgba(255, 255, 255, 0.12);
  --t-background-transparent-strong: rgba(255, 255, 255, 0.18);
  --t-background-transparent-blue: rgba(255, 255, 255, 0.14);
  --t-background-primary: transparent;

  --t-border-color-light: rgba(255, 255, 255, 0.10);
  --t-border-color-medium: rgba(255, 255, 255, 0.14);

  --t-accent-primary: rgba(255, 255, 255, 0.16);
  --t-accent-secondary: rgba(255, 255, 255, 0.12);
  --t-accent-tertiary: rgba(255, 255, 255, 0.08);
}

/* Dunkelmodus: dort passt Twentys Standard ohnehin besser zur
 * Hausfarbe. Nur die Leiste bekommt denselben Navy-Ton, damit beide
 * Modi erkennbar dasselbe Produkt sind. */
html .dark #root > div:first-child > div > div:first-child,
html #root > div:first-child > div > div:first-child {
  background: #202867;
}