/* ============================================================
   OO Theme Dunkel
   Die Graupalette wird umgedreht; die semantischen Aliase (--oo-color-*) und Neutral/Black leiten sich daraus ab.
   Weiche Varianten (lighter/light) mischen die Farbe mit dem dunklen Hintergrund statt mit Weiß.
   Eigenes CSS der App bleibt nur dunkel-tauglich, wenn es ausschließlich var(--oo-*) verwendet.

   Fest dunkel: normal nach theme.css einbinden. Dem System folgend (hell/dunkel nach Windows bzw. Browser, in einer
   WebView2 über CoreWebView2Profile.PreferredColorScheme): den Link mit media="(prefers-color-scheme: dark)" versehen.
   ============================================================ */

:root {
    --oo-gray-50: #1b1e24;
    --oo-gray-100: #121418;
    --oo-gray-150: #20242b;
    --oo-gray-200: #2a2f37;
    --oo-gray-250: #313640;
    --oo-gray-300: #3a404b;
    --oo-gray-350: #4a515e;
    --oo-gray-400: #5d6470;
    --oo-gray-450: #737a87;
    --oo-gray-500: #8a909c;
    --oo-gray-550: #9fa5b0;
    --oo-gray-600: #b3b8c2;
    --oo-gray-650: #c3c8d0;
    --oo-gray-700: #d0d4db;
    --oo-gray-750: #dde0e6;
    --oo-gray-800: #e6e8ec;
    --oo-gray-850: #eef0f3;
    --oo-gray-900: #f3f4f6;
    --oo-gray-950: #fafafa;

    /* Grundfarben aufgehellt, damit sie auf dunklem Grund als Text, Rand und Fläche lesbar sind; darauf dunkle Schrift */
    --oo-primary: #7fa9b0;
    --oo-secondary: #a78bfa;
    --oo-danger: #f87171;
    --oo-success: #4ade80;
    --oo-warning: #fbbf24;
    --oo-info: #22d3ee;
    --oo-primary-on: #0d1b1e;
    --oo-secondary-on: var(--oo-gray-100);
    --oo-danger-on: var(--oo-gray-100);
    --oo-success-on: var(--oo-gray-100);
    --oo-warning-on: var(--oo-gray-100);
    --oo-info-on: var(--oo-gray-100);
    --oo-black-on: #121418;

    /* Lighter/Light: dezente Tönung des dunklen Hintergrunds, darauf helle Schrift (eigene -lighter-on/-light-on) */
    --oo-primary-lighter: color-mix(in oklch, var(--oo-primary) 22%, var(--oo-gray-100));
    --oo-primary-light: color-mix(in oklch, var(--oo-primary) 40%, var(--oo-gray-100));
    --oo-secondary-lighter: color-mix(in oklch, var(--oo-secondary) 22%, var(--oo-gray-100));
    --oo-secondary-light: color-mix(in oklch, var(--oo-secondary) 40%, var(--oo-gray-100));
    --oo-danger-lighter: color-mix(in oklch, var(--oo-danger) 22%, var(--oo-gray-100));
    --oo-danger-light: color-mix(in oklch, var(--oo-danger) 40%, var(--oo-gray-100));
    --oo-success-lighter: color-mix(in oklch, var(--oo-success) 22%, var(--oo-gray-100));
    --oo-success-light: color-mix(in oklch, var(--oo-success) 40%, var(--oo-gray-100));
    --oo-warning-lighter: color-mix(in oklch, var(--oo-warning) 22%, var(--oo-gray-100));
    --oo-warning-light: color-mix(in oklch, var(--oo-warning) 40%, var(--oo-gray-100));
    --oo-info-lighter: color-mix(in oklch, var(--oo-info) 22%, var(--oo-gray-100));
    --oo-info-light: color-mix(in oklch, var(--oo-info) 40%, var(--oo-gray-100));
    --oo-primary-lighter-on: var(--oo-color-text);
    --oo-primary-light-on: var(--oo-color-text);
    --oo-secondary-lighter-on: var(--oo-color-text);
    --oo-secondary-light-on: var(--oo-color-text);
    --oo-danger-lighter-on: var(--oo-color-text);
    --oo-danger-light-on: var(--oo-color-text);
    --oo-success-lighter-on: var(--oo-color-text);
    --oo-success-light-on: var(--oo-color-text);
    --oo-warning-lighter-on: var(--oo-color-text);
    --oo-warning-light-on: var(--oo-color-text);
    --oo-info-lighter-on: var(--oo-color-text);
    --oo-info-light-on: var(--oo-color-text);

    /* Dark/Darker: kräftiger statt noch dunkler – noch dunkler verschwände auf dem dunklen Grund (auch Hover und Outline-Text) */
    --oo-primary-dark: color-mix(in oklch, var(--oo-primary) 80%, white);
    --oo-primary-darker: color-mix(in oklch, var(--oo-primary) 60%, white);
    --oo-secondary-dark: color-mix(in oklch, var(--oo-secondary) 80%, white);
    --oo-secondary-darker: color-mix(in oklch, var(--oo-secondary) 60%, white);
    --oo-danger-dark: color-mix(in oklch, var(--oo-danger) 80%, white);
    --oo-danger-darker: color-mix(in oklch, var(--oo-danger) 60%, white);
    --oo-success-dark: color-mix(in oklch, var(--oo-success) 80%, white);
    --oo-success-darker: color-mix(in oklch, var(--oo-success) 60%, white);
    --oo-warning-dark: color-mix(in oklch, var(--oo-warning) 80%, white);
    --oo-warning-darker: color-mix(in oklch, var(--oo-warning) 60%, white);
    --oo-info-dark: color-mix(in oklch, var(--oo-info) 80%, white);
    --oo-info-darker: color-mix(in oklch, var(--oo-info) 60%, white);

    /* Switch: heller Schieber, sonst verschwindet er auf der dunklen Bahn */
    --oo-switch-thumb: var(--oo-gray-800);
    --oo-switch-track: var(--oo-gray-350);

    /* Toast: dunkle, leicht abgehobene Karte statt der umgedrehten (hellen) Grautöne; Dialog: dunkler Schleier statt weißem */
    --oo-toast-bg: var(--oo-gray-250);
    --oo-toast-text: var(--oo-gray-900);
    --oo-toast-muted: var(--oo-gray-550);
    --oo-dialog-backdrop: hsla(220, 15%, 6%, 0.7);

    /* Jodit (RichTextEditor, MarkdownEditor) bringt eigene, feste helle Farben mit – an die Tokens hängen */
    --jd-color-white: var(--oo-color-surface);
    --jd-color-panel: var(--oo-gray-150);
    --jd-color-text: var(--oo-color-text);
    --jd-color-dark: var(--oo-gray-700);
    --jd-color-gray: var(--oo-gray-300);
    --jd-color-gray-dark: var(--oo-gray-500);
    --jd-color-border: var(--oo-gray-300);
    --jd-color-resizer: var(--oo-gray-350);
    --jd-color-text-icons: var(--oo-gray-700);
    --jd-color-background-button-hover: var(--oo-gray-200);
    --jd-color-button-background-hover: var(--oo-gray-200);
    --jd-color-background-gray-hover: var(--oo-gray-150);
    --jd-color-background-light-gray: var(--oo-gray-150);
    --jd-color-background-selection: color-mix(in oklch, var(--oo-primary) 40%, var(--oo-gray-100));

    /* Bildlaufleisten, Formularelemente und Standardfarben des Browsers ebenfalls dunkel */
    color-scheme: dark;
}