:root {
    /* Hue-System */
    --h-primary: 295;    /* Ihr Violett-Rosa */
    --h-bg: 270;         /* Ihr Hintergrund-Violett */
    --h-success: 145;    /* Grün */
    --h-warning: 65;     /* Orange */
    --h-error: 25;       /* Rot */
    --h-info: 240;       /* Blau */

    /* Einheitliche Lightness-Abstufungen */
    --l-subtle: 25%;    /* Für dezente Hintergründe */
    --l-hover: 50%;     /* Für Hover-States */
    --l-border: 70%;    /* Für sichtbare Rahmen */
    --l-text: 85%;      /* Für gut lesbaren Text */

    /* Chroma-System basierend auf Anwendungsfall */
    --c-vivid: 0.18;     /* Für Hauptfarben, Buttons */
    --c-moderate: 0.12;  /* Für UI-Elemente */
    --c-subtle: 0.06;    /* Für Hintergründe */
    --c-muted: 0.03;     /* Für sehr dezente Effekte */

    /**
     * 🖤 Hintergrundfarben – kein HDR nötig
     * L: Lightness, C: Chroma, H: Hue
     */
    --bg: oklch(18% 0.01 270);       /* sehr dunkles Violettblau */
    --bg-alt: oklch(26% 0.015 270);  /* leicht aufgehellt */

    /**
     * 🤍 Textfarben – hoher Kontrast
     */
    --text: oklch(95% 0.005 270);    /* fast weiß */
    --muted: oklch(70% 0.01 270);    /* leichtes Grau mit Farbstich */

    /**
     * 🎨 Akzentfarbe – sichtbar, auch auf HDR
     * oklch ist bevorzugt, da linear; P3 gibt extra Boost bei HDR-Displays
     */
    --accent: oklch(70% 0.2 295); /* sattes Violett-Rosa */
    --accent-p3: color(display-p3 1 0.3 0.8); /* pink/lila – intensiver auf HDR */

    /** Border */
    --border: oklch(40% 0.02 var(--h-bg));

    /**
     * ✨ Glow-Farbe – über 100% L (= HDR-like)
     */
    --glow: oklch(115% 0.22 295); /* extrem helles pink, über weiß hinaus */


    /**
     * Semantische Farbpalette
     */
    --success-base: oklch(60% var(--c-vivid) var(--h-success));
    --success: var(--success-base);
    --success-subtle: oklch(var(--l-subtle) var(--c-muted) var(--h-success));
    --success-hover: oklch(var(--l-hover) var(--c-vivid) var(--h-success));
    --success-border: oklch(var(--l-border) var(--c-moderate) var(--h-success));
    --success-text: oklch(var(--l-text) var(--c-subtle) var(--h-success));

    --error-base: oklch(55% 0.18 25);




    --warning-base: oklch(70% 0.12 65);

    --info-base: oklch(60% 0.15 240);



    /* Manuelle Varianten für bessere Browser-Unterstützung */

    --error: var(--error-base);
    --error-subtle: oklch(var(--l-subtle) 0.036 25);
    --error-hover: oklch(var(--l-hover) 0.18 25);
    --error-border: oklch(var(--l-border) 0.14 25);
    --error-text: oklch(var(--l-text) 0.12 25);

    --warning: var(--warning-base);
    --warning-subtle: oklch(25% 0.024 65);
    --warning-border: oklch(80% 0.096 65);

    /**
     * 🎯 Fallback für alte Browser: überschreiben P3 mit oklch automatisch
     */
    color-scheme: dark;

    background-color: var(--bg);
    color: var(--text);
}

/**
 * 🖥️ HDR-Support – bei Geräten mit Dynamic Range Support (aktuell v. a. Safari)
 */
/* noinspection CssInvalidMediaFeature */
@media (dynamic-range: high) {
    :root {
        --accent: var(--accent-p3);
    }
}