/* Helle Markenfarben aus dem öffentlichen DHBW-Webauftritt:
   https://www.dhbw.de/typo3conf/ext/dhbw_core/Resources/Public/Css/main.css
   Dunklere Hoverfarben, Darkmode und weitere UI-Farben sind Studly-Ergänzungen. */
:root {
    /* Palettenwerte: Komponenten verwenden die semantischen --color-…-Tokens. */
    --light-color-background: #ffffff;
    --light-color-surface: #f5f5f5;
    --light-color-navigation-hover-border: #bdbdbd;
    --light-color-text: #292929;
    --light-color-muted: #5c6971;
    --light-color-accent: #e2001a;
    --light-color-accent-hover: #b50015;
    --light-color-on-accent: #ffffff;
    --light-color-border: #e5e5e5;
    --light-color-divider-subtle: #f1f1f1;
    --light-color-control-border: #757575;
    --light-color-control-subtle: #b8bdc0;
    --light-color-option-border: #cbd0d3;
    --light-color-accent-tint: #fff4f5;
    --light-color-error-border: #f0c9ce;
    --light-color-checkbox-border: #858e94;
    --light-color-priority-normal: #a4adb2;
    --light-color-priority-low: #8d969c;
    --light-color-icon-secondary: #7a848b;
    --light-color-lock: #757d82;
    --light-color-dialog-backdrop: #0005;
    --light-color-dialog-shadow: #0002;
    --light-color-error: #a11220;
    --light-color-header-scrolled-text: #0a0a0a;
    --light-color-header-scrolled-muted: #333333;
    --light-color-header-translucent: rgb(255 255 255 / 50%);
    --light-color-shadow: rgb(0 0 0 / 12%);
    --light-color-backdrop: rgb(0 0 0 / 45%);
    --light-color-accent-subtle: rgb(226 0 26 / 3%);

    --dark-color-background: #17191c;
    --dark-color-surface: #22262b;
    --dark-color-navigation-hover-border: #6e7984;
    --dark-color-text: #f2f4f6;
    --dark-color-muted: #b7c0c8;
    --dark-color-accent: #ff7d8c;
    --dark-color-accent-hover: #ffa3ad;
    --dark-color-on-accent: #241114;
    --dark-color-border: #3d454d;
    --dark-color-control-border: #8996a2;
    --dark-color-error: #ff9c9c;
    --dark-color-header-scrolled-text: #ffffff;
    --dark-color-header-scrolled-muted: #d8dee3;
    --dark-color-header-translucent: rgb(23 25 28 / 50%);
    --dark-color-shadow: rgb(0 0 0 / 40%);
    --dark-color-backdrop: rgb(0 0 0 / 65%);
    --dark-color-accent-subtle: rgb(255 125 140 / 8%);

    /* Ohne Auswahl bleibt die bisherige helle Darstellung aktiv. */
    color-scheme: light;
    --color-background: var(--light-color-background);
    --color-surface: var(--light-color-surface);
    --color-navigation-hover-border: var(--light-color-navigation-hover-border);
    --color-text: var(--light-color-text);
    --color-muted: var(--light-color-muted);
    --color-accent: var(--light-color-accent);
    --color-accent-hover: var(--light-color-accent-hover);
    --color-on-accent: var(--light-color-on-accent);
    --color-border: var(--light-color-border);
    --color-divider-subtle: var(--light-color-divider-subtle);
    --color-control-border: var(--light-color-control-border);

    --color-control-subtle: var(--light-color-control-subtle);
    --color-option-border: var(--light-color-option-border);

    --color-accent-tint: var(--light-color-accent-tint);

    --color-error-border: var(--light-color-error-border);

    --color-checkbox-border: var(--light-color-checkbox-border);

    --color-dialog-backdrop: var(--light-color-dialog-backdrop);
    --color-dialog-shadow: var(--light-color-dialog-shadow);
    --color-priority-normal: var(--light-color-priority-normal);
    --color-priority-low: var(--light-color-priority-low);
    --color-icon-secondary: var(--light-color-icon-secondary);
    --color-lock: var(--light-color-lock);
    --color-error: var(--light-color-error);
    --color-header-scrolled-text: var(--light-color-header-scrolled-text);
    --color-header-scrolled-muted: var(--light-color-header-scrolled-muted);
    --color-header-translucent: var(--light-color-header-translucent);
    --color-shadow: var(--light-color-shadow);
    --color-backdrop: var(--light-color-backdrop);
    --color-accent-subtle: var(--light-color-accent-subtle);

    --font-body: system-ui, sans-serif;
    --space-small: 0.5rem;
    --space-medium: 1rem;
    --space-large: 2rem;
    --radius-control: 0.375rem;
    /* Ab 90rem Fensterbreite mitwachsen, breite Ansichten bei 100rem begrenzen. */
    --page-width: clamp(70rem, calc(100vw - 20rem), 100rem);
}

/* Umschaltpunkt für das Konto-Team: data-theme am <html>-Element. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --color-background: var(--dark-color-background);
    --color-surface: var(--dark-color-surface);
    --color-navigation-hover-border: var(--dark-color-navigation-hover-border);
    --color-text: var(--dark-color-text);
    --color-muted: var(--dark-color-muted);
    --color-accent: var(--dark-color-accent);
    --color-accent-hover: var(--dark-color-accent-hover);
    --color-on-accent: var(--dark-color-on-accent);
    --color-border: var(--dark-color-border);
    --color-divider-subtle: var(--dark-color-border);
    --color-control-border: var(--dark-color-control-border);

    --color-control-subtle: var(--dark-color-control-border);
    --color-option-border: var(--dark-color-control-border);

    --color-accent-tint: var(--dark-color-accent-subtle);

    --color-error-border: var(--dark-color-error);

    --color-checkbox-border: var(--dark-color-control-border);

    --color-dialog-backdrop: var(--dark-color-backdrop);
    --color-dialog-shadow: var(--dark-color-shadow);
    --color-priority-normal: var(--dark-color-muted);
    --color-priority-low: var(--dark-color-muted);
    --color-icon-secondary: var(--dark-color-muted);
    --color-lock: var(--dark-color-muted);
    --color-error: var(--dark-color-error);
    --color-header-scrolled-text: var(--dark-color-header-scrolled-text);
    --color-header-scrolled-muted: var(--dark-color-header-scrolled-muted);
    --color-header-translucent: var(--dark-color-header-translucent);
    --color-shadow: var(--dark-color-shadow);
    --color-backdrop: var(--dark-color-backdrop);
    --color-accent-subtle: var(--dark-color-accent-subtle);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        color-scheme: dark;
        --color-background: var(--dark-color-background);
        --color-surface: var(--dark-color-surface);
        --color-navigation-hover-border: var(--dark-color-navigation-hover-border);
        --color-text: var(--dark-color-text);
        --color-muted: var(--dark-color-muted);
        --color-accent: var(--dark-color-accent);
        --color-accent-hover: var(--dark-color-accent-hover);
        --color-on-accent: var(--dark-color-on-accent);
        --color-border: var(--dark-color-border);
        --color-divider-subtle: var(--dark-color-border);
        --color-control-border: var(--dark-color-control-border);

        --color-control-subtle: var(--dark-color-control-border);
        --color-option-border: var(--dark-color-control-border);

        --color-accent-tint: var(--dark-color-accent-subtle);

        --color-error-border: var(--dark-color-error);

        --color-checkbox-border: var(--dark-color-control-border);

        --color-dialog-backdrop: var(--dark-color-backdrop);
        --color-dialog-shadow: var(--dark-color-shadow);
        --color-priority-normal: var(--dark-color-muted);
        --color-priority-low: var(--dark-color-muted);
        --color-icon-secondary: var(--dark-color-muted);
        --color-lock: var(--dark-color-muted);
        --color-error: var(--dark-color-error);
        --color-header-scrolled-text: var(--dark-color-header-scrolled-text);
        --color-header-scrolled-muted: var(--dark-color-header-scrolled-muted);
        --color-header-translucent: var(--dark-color-header-translucent);
        --color-shadow: var(--dark-color-shadow);
        --color-backdrop: var(--dark-color-backdrop);
        --color-accent-subtle: var(--dark-color-accent-subtle);
    }
}