/*
    Die Farb- und Formsprache der Anwendung, an genau einer Stelle.

    Zwei Schichten:

      A) --app-*  ist das, was das eigene CSS der Anwendung liest und was ein Mensch hier
         aendert. Es gibt eine Grauleiter, einen Akzent und drei Meldungsfarben -- mehr
         nicht. Wer eine neue Farbe braucht, prueft zuerst, ob eine vorhandene passt.

      B) --bs-*  wird aus A abgeleitet. Diese Bruecke existiert NUR, damit fremdes Markup
         mitzieht, ohne dass es angefasst wird: Bootstraps eigene Klassen (alert, table,
         form-control, btn) und die DevExpress-Bruecke bootstrap-external.bs5, die 1146
         ihrer --dxbl-*-Tokens aus --bs-* ableitet. Das eigene CSS liest NIE --bs-* direkt.

    Warum das ohne !important auskommt: bootstrap.min.css, das DevExpress-Theme und diese
    Datei deklarieren alle auf :root bzw. [data-bs-theme=...] -- gleiche Spezifitaet (0,1,0),
    also entscheidet die Reihenfolge im <head>, und diese Datei steht dort zuletzt.
*/

/* ============================== A) Hell ============================== */
:root,
[data-bs-theme="light"] {
    /* Die native Farbwelt (Bildlaufleisten, details-Dreieck, Eingabefelder, Caret,
       Textauswahl) haengt an dieser einen Zeile -- ohne sie bleibt der Browser hell,
       egal was die Farben sagen. */
    color-scheme: light;

    /* Eine einzige Grauleiter. 0 ist Papier, 900 ist Schrift. */
    --app-gray-0:   #ffffff;
    --app-gray-50:  #f7f7f8;
    --app-gray-200: #e6e6ea;
    --app-gray-300: #d7d7dd;
    --app-gray-400: #b8b8c0;
    --app-gray-500: #8b8b95;
    --app-gray-700: #4a4a52;

    /* Vier Sprossen stehen als rgb-Tripel da, weil Bootstrap sie in dieser Form liest
       (--bs-light-rgb, --bs-secondary-rgb, --bs-dark-rgb, --bs-body-color-rgb) und CSS ein
       Tripel nicht aus einem Hex-Wert gewinnen kann. Das Tripel ist die Quelle, die Farbe
       wird daraus abgeleitet -- nicht umgekehrt, sonst stuenden zwei Werte nebeneinander,
       die auseinanderlaufen koennen. */
    --app-gray-100-rgb: 241, 241, 243;  --app-gray-100: rgb(var(--app-gray-100-rgb));
    --app-gray-600-rgb: 106, 106, 116;  --app-gray-600: rgb(var(--app-gray-600-rgb));
    --app-gray-800-rgb:  46,  46,  52;  --app-gray-800: rgb(var(--app-gray-800-rgb));
    --app-gray-900-rgb:  27,  27,  31;  --app-gray-900: rgb(var(--app-gray-900-rgb));

    /* Flaechen. canvas ist die Seite, surface die Karte darauf. */
    --app-canvas:    var(--app-gray-50);
    --app-surface:   var(--app-gray-0);
    --app-surface-2: var(--app-gray-100);   /* Leiste, Codeblock, Tabellenkopf */
    --app-surface-3: var(--app-gray-200);   /* eingesenkt: eigene Nachricht, Chip */

    /* Linien statt Schatten. -strong nur fuer Eingabefelder, die greifbar sein muessen. */
    --app-border:        var(--app-gray-200);
    --app-border-strong: var(--app-gray-300);

    --app-text:       var(--app-gray-900);
    --app-text-muted: var(--app-gray-600);

    --app-accent:          #4a5bd8;
    --app-accent-rgb:      74, 91, 216;   /* Bootstrap rechnet mit rgba(var(--...-rgb), .5) */
    --app-accent-hover:    #3d4dc0;
    --app-accent-contrast: #ffffff;
    --app-accent-subtle:   #eceffb;       /* Fuellung der aktiven Zeile */

    --app-hover-bg:  var(--app-gray-100);
    --app-active-bg: var(--app-gray-200);

    /* Die Hausfarbe von GOWBOX. Sie traegt AUSSCHLIESSLICH das Logo und das Wasserzeichen.
       Bedienelemente bleiben beim Akzent -- zwei Signalfarben, die um dieselbe
       Aufmerksamkeit kaempfen, sind keine Marke, sondern Laerm. */
    --app-brand: #e3000f;

    /* Meldungen: je Vollfarbe plus das Trio Grund / Rand / Schrift fuer Flaechen. */
    --app-danger:        #c0392f;
    --app-danger-rgb:    192, 57, 47;
    --app-danger-bg:     #fdf0ef;
    --app-danger-border: #f1c8c4;
    --app-danger-text:   #8b2019;

    --app-warning:        #b5730a;
    --app-warning-rgb:    181, 115, 10;
    --app-warning-bg:     #fdf6e8;
    --app-warning-border: #efdcb2;
    --app-warning-text:   #7a4c05;

    --app-success:        #2a7a48;
    --app-success-rgb:    42, 122, 72;
    --app-success-bg:     #eef7f1;
    --app-success-border: #c2e1ce;
    --app-success-text:   #1d5532;

    --app-info:     #1d6fa5;
    --app-info-rgb: 29, 111, 165;

    --app-radius-sm:   .25rem;
    --app-radius:      .5rem;
    --app-radius-lg:   .75rem;
    --app-radius-pill: 999px;

    /* Die Sprechblase ist runder als alles andere -- das ist die Form, an der ein Chat als
       Chat erkannt wird. Eigener Name, damit sie an genau einer Stelle steht und nicht als
       ".6rem" in drei Komponenten. */
    --app-radius-bubble: 1.125rem;

    --app-space-1: .25rem;
    --app-space-2: .5rem;
    --app-space-3: .75rem;
    --app-space-4: 1rem;
    --app-space-5: 1.5rem;
    --app-space-6: 2rem;

    /* Systemschriften, wie bisher -- die Anwendung bindet bewusst keinen Webfont ein. */
    --app-font:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --app-font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

    /* Genau ein Schatten, und der nur fuer Ueberlagerungen. In der Flaeche traegt der
       1px-Rand die Abgrenzung. */
    --app-shadow:     0 4px 16px rgb(0 0 0 / .10), 0 1px 2px rgb(0 0 0 / .06);
    --app-focus-ring: 0 0 0 3px rgba(var(--app-accent-rgb), .35);

    /* Die Flaeche hinter der ausgefahrenen Navigationsschublade. Steht hier und nicht in der
       Komponente, weil in den bereichsbegrenzten CSS-Dateien unter Components keine
       Rohfarbe stehen darf (N7). */
    --app-backdrop: rgb(0 0 0 / .45);
}

/* ============================== A2) Dunkel ==============================
   Die Leiter kehrt sich um. Die vier Flaechen-Namen stehen trotzdem noch einmal
   ausgeschrieben da: im Dunkeln ist "surface heller als canvas" die umgekehrte Sprosse,
   und eine Regel, die man rueckwaerts denken muss, ist keine Ersparnis. */
[data-bs-theme="dark"] {
    color-scheme: dark;

    --app-gray-0:   #131316;
    --app-gray-50:  #17171b;
    --app-gray-200: #26262c;
    --app-gray-300: #33343b;
    --app-gray-400: #4d4e57;
    --app-gray-500: #7c7d87;
    --app-gray-700: #c0c1c8;

    --app-gray-100-rgb:  30,  30,  35;  --app-gray-100: rgb(var(--app-gray-100-rgb));
    --app-gray-600-rgb: 155, 156, 165;  --app-gray-600: rgb(var(--app-gray-600-rgb));
    --app-gray-800-rgb: 221, 221, 226;  --app-gray-800: rgb(var(--app-gray-800-rgb));
    --app-gray-900-rgb: 241, 241, 243;  --app-gray-900: rgb(var(--app-gray-900-rgb));

    --app-canvas:    var(--app-gray-0);
    --app-surface:   var(--app-gray-100);
    --app-surface-2: var(--app-gray-50);
    --app-surface-3: var(--app-gray-200);

    --app-border:        var(--app-gray-300);
    --app-border-strong: var(--app-gray-400);

    /* Heller als im Hellmodus, sonst haelt der Akzent den Kontrast zum dunklen Grund nicht. */
    --app-accent:          #8b9cff;
    --app-accent-rgb:      139, 156, 255;
    --app-accent-hover:    #a3b1ff;
    --app-accent-contrast: #14142a;
    --app-accent-subtle:   #232744;

    /* Aufgehellt, aus demselben Grund wie der Akzent: das Originalrot haelt auf dem dunklen
       Grund die 3:1 fuer grafische Elemente nicht. */
    --app-brand: #ff2d3a;

    --app-danger:        #ef7a70;
    --app-danger-rgb:    239, 122, 112;
    --app-danger-bg:     #3a1f1d;
    --app-danger-border: #5c2e2a;
    --app-danger-text:   #f6b6b0;

    --app-warning:        #e0a441;
    --app-warning-rgb:    224, 164, 65;
    --app-warning-bg:     #382b16;
    --app-warning-border: #584222;
    --app-warning-text:   #f0cf94;

    --app-success:        #5cbe80;
    --app-success-rgb:    92, 190, 128;
    --app-success-bg:     #18301f;
    --app-success-border: #274a31;
    --app-success-text:   #a4dcb8;

    --app-info:     #63b1e8;
    --app-info-rgb: 99, 177, 232;

    --app-shadow: 0 4px 18px rgb(0 0 0 / .55), 0 1px 2px rgb(0 0 0 / .40);
}

/* ============================== B) Die Bruecke ==============================
   Die Namensliste ist nicht geraten, sondern die Menge, die bootstrap-external.bs5
   tatsaechlich liest (nachgezaehlt: --bs-primary 224x, --bs-white 171x,
   --bs-body-color 111x, --bs-gray-400 85x, --bs-dark 62x, --bs-light 53x,
   --bs-gray-900 45x), plus die -subtle-Namen, aus denen Bootstrap seine alert-Klassen baut.

   WARUM DIE GRAULEITER UND --bs-primary HIER STEHEN, UND ZWAR FUER BEIDE THEMES:
   Bootstraps eigener [data-bs-theme=dark]-Block dreht --bs-gray-*, --bs-white, --bs-light,
   --bs-dark und --bs-primary NICHT um (nachgezaehlt: 52 Variablen, keine davon). Ohne
   diese Zeilen blieben im Dunkelmodus Gitterrahmen und Schrift auf DevExpress-Flaechen
   hell. Deshalb nennt der Selektor unten ausdruecklich auch [data-bs-theme="dark"].

   --bs-white wird NICHT umdefiniert: bei DevExpress ist es 171x die SCHRIFT auf gefuellten
   Flaechen (--dxbl-btn-color, --dxbl-grid-focus-color, ...), nicht die Flaeche selbst. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-font-family: var(--app-font);
    --bs-body-bg:          var(--app-canvas);
    --bs-body-color:       var(--app-text);
    --bs-border-color:     var(--app-border);
    --bs-secondary-color:  var(--app-text-muted);
    --bs-secondary-bg:     var(--app-surface-2);
    --bs-tertiary-bg:      var(--app-surface-3);
    --bs-emphasis-color:   var(--app-text);
    --bs-heading-color:    var(--app-text);
    --bs-link-color:       var(--app-accent);
    --bs-link-hover-color: var(--app-accent-hover);

    /* Bootstrap faerbt <a>, .table und die .bg-*-Hilfsklassen ueber rgba(var(--…-rgb), …),
       nicht ueber die Farbnamen darueber. Ohne diese sechs Zeilen bleibt jeder Link
       Bootstrap-Blau, egal was --bs-link-color sagt (nachgemessen). */
    --bs-link-color-rgb:      var(--app-accent-rgb);
    --bs-body-color-rgb:      var(--app-gray-900-rgb);
    --bs-emphasis-color-rgb:  var(--app-gray-900-rgb);
    --bs-secondary-rgb:       var(--app-gray-600-rgb);
    --bs-light-rgb:           var(--app-gray-100-rgb);
    --bs-dark-rgb:            var(--app-gray-800-rgb);
    --bs-code-color:       var(--app-accent);

    --bs-gray-100: var(--app-gray-100);
    --bs-gray-200: var(--app-gray-200);
    --bs-gray-300: var(--app-gray-300);
    --bs-gray-400: var(--app-border-strong);
    --bs-gray-500: var(--app-gray-500);
    --bs-gray-600: var(--app-text-muted);
    --bs-gray-700: var(--app-gray-700);
    --bs-gray-800: var(--app-gray-800);
    --bs-gray-900: var(--app-text);
    --bs-light:    var(--app-surface-2);
    --bs-dark:     var(--app-gray-800);

    --bs-primary:   var(--app-accent);    --bs-primary-rgb: var(--app-accent-rgb);
    --bs-danger:    var(--app-danger);    --bs-danger-rgb:  var(--app-danger-rgb);
    --bs-warning:   var(--app-warning);   --bs-warning-rgb: var(--app-warning-rgb);
    --bs-success:   var(--app-success);   --bs-success-rgb: var(--app-success-rgb);
    --bs-info:      var(--app-info);      --bs-info-rgb:    var(--app-info-rgb);
    --bs-secondary: var(--app-text-muted);

    --bs-primary-bg-subtle:     var(--app-accent-subtle);
    --bs-primary-border-subtle: var(--app-border);
    --bs-primary-text-emphasis: var(--app-accent-hover);
    --bs-danger-bg-subtle:      var(--app-danger-bg);
    --bs-danger-border-subtle:  var(--app-danger-border);
    --bs-danger-text-emphasis:  var(--app-danger-text);
    --bs-warning-bg-subtle:     var(--app-warning-bg);
    --bs-warning-border-subtle: var(--app-warning-border);
    --bs-warning-text-emphasis: var(--app-warning-text);
    --bs-success-bg-subtle:     var(--app-success-bg);
    --bs-success-border-subtle: var(--app-success-border);
    --bs-success-text-emphasis: var(--app-success-text);

    --bs-border-radius-sm: var(--app-radius-sm);
    --bs-border-radius:    var(--app-radius-sm);
    --bs-border-radius-lg: var(--app-radius);
    --bs-border-radius-xl: var(--app-radius-lg);
}