:root {
    --color-primary: #9c26bc;
    --color-primary-rgb: 156, 38, 188;
    --color-secondary: #b33dd1;
    --color-accent: #d54ee6;
    --color-text-gray: #4a284f;
    --color-text-black: #2a0a2e;

    /* Derived colors */
    --color-success: #8a2e9c;
    --color-info: #a64cc2;
    --color-warning: #c462d6;
    --color-danger: #e74c9c;
    --color-input-color: black;
    --color-bg-input: #f3e6f4;
    --color-bg-toast-alert: #f5e8f6;
    --color-bg-body: #f3e6f4;
    --color-bg-sidebar-item: #ede0ed;
    --color-bg: radial-gradient(circle at -3% -5%, #e6cbe6 5%, transparent 40%),
    radial-gradient(circle at 110% 10%, #e1c4e1 10%, transparent 45%),
    linear-gradient(to bottom, #f0e6f0, #f8f0f8);

    --color-bg-success-toast: #f0e1f4;
    --color-bg-error-toast: #f4e1ed;
    --color-bg-warning-toast: #f4e1e6;
    --color-bg-info-toast: #f0e6f4;
    --color-bg-toast-alert-line: #f5e8f6;
    --color-line-sidebar: #d1b0d1;

    /* Modal Colors */
    --color-bg-modal: rgb(245, 235, 245);
    --color-bg-modal-header: #e6d1e6;
    --color-bg-modal-close-icon: invert(64%) sepia(17%) saturate(1135%) hue-rotate(260deg) brightness(95%) contrast(85%);

    /* Login Colors */
    --color-bg-login-container: #f8f0f8;

    /* Filters */
    --filter-primary-color: invert(25%) sepia(83%) saturate(2011%) hue-rotate(270deg) brightness(85%) contrast(106%);
    --filter-no-selected-color: invert(93%) sepia(3%) saturate(2576%) hue-rotate(260deg) brightness(84%) contrast(83%);
    --color-bg-footer: #ffe6ff;
    --color-text-footer: #2a0a2e;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-text-gray: #8f6a8f;
        --color-text-black: #e1c4e1;
        --color-input-color: white;
        --color-bg-input: #2a1a2a;
        --color-bg-body: #1e141e;
        --color-bg-sidebar-item: #4a2d4a;
        --color-bg-toast-alert: #261a26;
        --color-bg: radial-gradient(circle at -3% -5%, #3a1e3a 5%, transparent 40%),
        radial-gradient(circle at 110% 10%, #4a2d4a 10%, transparent 45%),
        linear-gradient(to bottom, #2a1a2a, #1e141e);

        --color-bg-success-toast: #2a1e2a;
        --color-bg-error-toast: #4a1e2a;
        --color-bg-warning-toast: #4a2a1e;
        --color-bg-info-toast: #1e2a4a;
        --color-line-sidebar: #5a3d5a;

        /* Modal Colors (Dark Theme) */
        --color-bg-modal: #261a26;
        --color-bg-modal-header: #4a2d4a;
        --color-bg-modal-close-icon: invert(87%) sepia(11%) saturate(1080%) hue-rotate(260deg) brightness(85%) contrast(91%);

        /* Login Colors */
        --color-bg-login-container: #1e141e;

        --color-bg-footer: #231c23;
        --color-text-footer: #e1c4e1;
    }
}