:root {
    /* RGB*/
    --purple-rgb: 157, 37, 147;
    --purple-dark-rgb: 99, 23, 93;
    --blue-rgb: 3, 76, 118;
    --green-rgb: 25, 135, 84;
    --red-rgb: 220, 53, 69;
    --red-dark-rgb: 176, 42, 55;
    --gray-rgb: 233, 236, 239;
    --gray-dark-rgb: 223,227,230;
    --gray-light-rgb: 248, 249, 250;
    --white-rgb: 255, 255, 255;
    --black-rgb: 33, 37, 41;
    /* Colors */
    --purple-color: rgb(var(--purple-rgb));
    --purple-dark-color: rgb(var(--purple-dark-rgb));
    --blue-color: rgb(var(--blue-rgb));
    --green-color: rgb(var(--green-rgb));
    --red-color: rgb(var(--red-rgb));
    --red-dark-color: rgb(var(--red-dark-rgb));
    --gray-color: rgb(var(--gray-rgb));
    --gray-dark-color: rgb(var(--gray-dark-rgb));
    --gray-light-color: rgb(var(--gray-light-rgb));
    --white-color: rgb(var(--white-rgb));
    --black-color: rgb(var(--black-rgb));
    /* Definitions */
    --primary-color: var(--purple-color);
    --primary-dark-color: var(--purple-dark-color);
    --header-color: var(--white-color);
    --header-border-color: var(--gray-dark-color);
    --nav-item-color: rgba(var(--gray-rgb), 0.5);
    /*Kendo*/
    --kendo-color-primary: var(--primary-color);
    --kendo-color-primary-active: var(--primary-dark-color);
    --kendo-color-primary-hover: var(--primary-dark-color);
    --kendo-color-base: var(--primary-color);
    --kendo-color-base-active: var(--primary-dark-color);
    --kendo-color-base-hover: var(--primary-dark-color);
    --kendo-color-on-base: var(--white-color);
    --kendo-color-primary-on-surface: var(--primary-color);
}

.btn-primary {
    /* Bootstrap */
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: var(--purple-dark-color);
    --bs-btn-hover-border-color: var(--purple-dark-color);
    --bs-btn-active-bg: var(--purple-dark-color);
    --bs-btn-active-border-color: var(--purple-dark-color);
    --bs-btn-disabled-bg: var(--gray-light-color);
    --bs-btn-disabled-border-color: var(--gray-color);
}