:root {
    --primary: #0d6efd;
    --primary-hover: #084298;
    --primary-text: white;
    --primary-border: white;

    --color1: #5CA9E9;
    --color1-hover: rgb(190, 160, 254);
    --color1-text: black;
    --color1-border: black;

    --color2: #B3DBF2;
    --color2-hover: #bfc4c9;
    --color2-text: black;
    --color2-border: black;

    --color3: #FFFFC0;
    --color3-hover: #4bb3fd;
    --color3-text: black;
    --color3-border: black;

    --success: #198754;
    --success-hover: #0f5132;
    --success-text: black;
    --success-border: white;

    --warning: #ffc107;
    --warning-hover: #e0a800;
    --warning-text: black;
    --warning-border: black;

    --danger: #dc3545;
    --danger-hover: #7a1a23;
    --danger-text: white;
    --danger-border: white;

    --info: #0dcaf0;
    --info-hover: #09788c;
    --info-text: black;
    --info-border: black;

    --light: #f8f9fa;
    --light-hover: rgb(190, 160, 254);
    --light-text: black;
    --light-border: black;

    --dark: #212529;
    --dark-hover: #6f42c1;
    --dark-text: white;
    --dark-border: white;
}

.color-primary,
.color-primary-hover {
    background-color: var(--primary);
    color: var(--primary-text);
    border-color: var(--primary-border);
}
.color-primary-hover:hover {
    background-color: var(--primary-hover);
}

.color-color1,
.color-color1-hover {
    background-color: var(--color1);
    color: var(--color1-text);
    border-color: var(--color1-border);
}
.color-color1-hover:hover {
    background-color: var(--color1-hover);
}

.color-color2,
.color-color2-hover {
    background-color: var(--color2);
    color: var(--color2-text);
    border-color: var(--color2-border);
}
.color-color2-hover:hover {
    background-color: var(--color2-hover);
}

.color-color3,
.color-color3-hover {
    background-color: var(--color3);
    color: var(--color3-text);
    border-color: var(--color3-border);
}
.color-color3-hover:hover {
    background-color: var(--color3-hover);
}

.color-success,
.color-success-hover {
    background-color: var(--success);
    color: var(--success-text);
    border-color: var(--success-border);
}
.color-success-hover:hover {
    background-color: var(--success-hover);
}

.color-danger,
.color-danger-hover {
    background-color: var(--danger);
    color: var(--danger-text);
    border-color: var(--danger-border);
}
.color-danger-hover:hover {
    background-color: var(--danger-hover);
}

.color-warning,
.color-warning-hover {
    background-color: var(--warning);
    color: var(--warning-text);
    border-color: var(--warning-border);
}
.color-warning-hover:hover {
    background-color: var(--warning-hover);
}

.color-info,
.color-info-hover {
    background-color: var(--info);
    color: var(--info-text);
    border-color: var(--info-border);
}
.color-info-hover:hover {
    background-color: var(--info-hover);
}

.color-light,
.color-light-hover {
    background-color: var(--light);
    color: var(--light-text);
    border-color: var(--light-border);
}
.color-light-hover:hover {
    background-color: var(--light-hover);
}

.color-dark,
.color-dark-hover {
    background-color: var(--dark);
    color: var(--dark-text);
    border-color: var(--dark-border);
}
.color-dark-hover:hover {
    background-color: var(--dark-hover);
}