:root {
    /* === Basis-Farbpalette === */
    --primary: #4a0f7f;
    --primary-rgb: 111, 27, 194;
    --primary-light: #a566d9;
    --primary-hover: #5a1599;
    --primary-dark: #4a0f7f;

    --secondary: #c2a36b;
    --secondary-rgb: 194, 163, 107;
    --secondary-hover: #a8894d;
    --secondary-dark: #8f7340;

    --success: #26b050;
    --success-rgb: 38, 176, 80;
    --success-hover: #1f9343;
    --success-dark: #187536;

    --danger: #e50000;
    --danger-rgb: 229, 0, 0;

    --info: #0087ff;
    --info-rgb: 0, 135, 255;

    --warning: #ffc107;
    --warning-rgb: 255, 193, 7;

    --link-color: #6f1bc2;
    --link-hover-color: #4a0f7f;

    /* === Neutrale Farben === */
    --white: #fff;
    --black: #000;
    --gray-light: #f7f7f7;
    --gray-medium: #929292;
    --gray-dark: #333;
    --gray-border-light: #d6d5d5;
    --gray-border-medium: #929292;
    --gray-text-secondary: #d7d7d7;

    /* === Layout-Farben === */
    --color-topbar: var(--primary);
    --color-sidebar: rgb(var(--primary-rgb));
    --color-background-dark: var(--primary);
    --color-background-light: var(--gray-light);

    /* === Navigation === */
    --navbar-item-hover: rgba(255, 255, 255, 0.15);
    --navbar-item-active: rgba(255, 255, 255, 0.25);

    /* === Overlays === */
    --overlay-dark-light: rgba(0, 0, 0, 0.2);
    --overlay-dark-medium: rgba(0, 0, 0, 0.3);
    --overlay-dark-heavy: rgba(0, 0, 0, 0.4);
    --overlay-white-subtle: rgba(255, 255, 255, 0.1);
    --overlay-white-medium: rgba(255, 255, 255, 0.37);
    --overlay-white-half: rgba(255, 255, 255, 0.5);

    /* === Pills/Tabs === */
    --pill-bg: rgba(var(--primary-rgb), 0.7);
    --pill-bg-hover: rgba(var(--primary-rgb), 0.5);
    --pill-text: var(--white);

    /* === Typography === */
    --font-size-base: 1.1rem;
    --font-size-sm: calc(var(--font-size-base) * 0.875);
    --font-size-lg: calc(var(--font-size-base) * 1.125);
    --font-size-xl: calc(var(--font-size-base) * 1.25);
    --font-size-xxl: calc(var(--font-size-base) * 1.5);

    /* === Navigation Font Sizes === */
    --font-size-nav: var(--font-size-base);
    --font-size-nav-title: var(--font-size-xl);
    --font-size-nav-icon: var(--font-size-xl);
    --font-size-nav-icon-lg: var(--font-size-xxl);
}