:root {
    /*
     * APP2 GLOBAL THEME
     * Nur globale Designwerte.
     * Für einen späteren Designwechsel normalerweise zuerst HIER ändern.
     */
    --app-bg: #0b1020;
    --app-panel: rgba(255,255,255,.065);
    --app-panel-strong: rgba(255,255,255,.09);
    --app-panel-border: rgba(255,255,255,.11);

    --app-text: #f3f6ff;
    --app-muted: #aab4ca;

    --app-primary: #8db3ff;
    --app-secondary: #bba8ff;
    --app-success: #79e2a7;
    --app-danger: #ff9eab;

    --app-shadow: 0 28px 80px rgba(0,0,0,.28);

    --app-radius-small: 12px;
    --app-radius-medium: 18px;
    --app-radius-large: 22px;

    --app-content-width: 1180px;
}

@media (prefers-color-scheme: light) {
    :root {
        --app-bg: #f4f7fc;
        --app-panel: rgba(255,255,255,.72);
        --app-panel-strong: rgba(255,255,255,.9);
        --app-panel-border: rgba(16,30,58,.10);

        --app-text: #11192c;
        --app-muted: #5f6d86;

        --app-shadow: 0 28px 80px rgba(39,64,112,.10);
    }
}