:root {
    --primary: #4e73df;
    --secondary: #858796;
    --success: #1cc88a;
    --info: #36b9cc;
    --warning: #f6c23e;
    --danger: #e74a3b;
    --dark: #5a5c69;
}

[data-theme="indigo"] {
    --primary: #6610f2;
}

[data-theme="purple"] {
    --primary: #6f42c1;
}

[data-theme="pink"] {
    --primary: #e83e8c;
}

[data-theme="red"] {
    --primary: #e74a3b;
}

[data-theme="orange"] {
    --primary: #fd7e14;
}

[data-theme="yellow"] {
    --primary: #f6c23e;
}

[data-theme="green"] {
    --primary: #1cc88a;
}

[data-theme="teal"] {
    --primary: #20c997;
}

[data-theme="cyan"] {
    --primary: #36b9cc;
}

[data-theme="rose"] {
    --primary: #fb7185;
}

/* Apply CSS Variables to Bootstrap overrides or custom components */
.btn-primary, .bg-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.text-primary {
    color: var(--primary) !important;
}