:root {
    --primary: #007bff;
    --success: #28a745;
    --warning: #ffc107;
    --danger: #dc3545;
    --link: #007bff;
    --dark: #343a40;
    --info: #17a2b8;
    --secondary: #6c757d;
    --light: #f8f9fa;
    --white: #fff;
    --karma: #ffa120;
}

/* Variants */
.btn-primary {
    background-color: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-success {
    background-color: var(--success);
    color: var(--white);
    border-color: var(--success);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #218838;
    border-color: #1e7e34;
}

.btn-warning {
    background-color: var(--warning);
    color: #212529;
    border-color: var(--warning);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: #e0a800;
    border-color: #d39e00;
}

.btn-danger {
    background-color: var(--danger);
    color: var(--white);
    border-color: var(--danger);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-info {
    background-color: var(--info);
    color: var(--white);
    border-color: var(--info);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: #138496;
    border-color: #117a8b;
}

.btn-dark {
    background-color: var(--dark);
    color: var(--white);
    border-color: var(--dark);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    background-color: #23272b;
    border-color: #1d2124;
}

.btn-secondary {
    background-color: var(--secondary);
    color: var(--white);
    border-color: var(--secondary);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-light {
    background-color: var(--light);
    color: #212529;
    border-color: var(--light);
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.btn-link {
    background-color: transparent;
    color: var(--link);
    border: none;
    padding: 0;
}

.btn-link:hover,
.btn-link:focus,
.btn-link:active {
    color: #0056b3;
    text-decoration: underline;
}

.btn-karma {
    background-color: var(--karma);
    color: #ffffff;
    border-color: var(--karma);
}

.btn-karma:hover,
.btn-karma:focus,
.btn-karma:active {
    background-color: #e0a800;
    border-color: #d39e00;
}

.btn-karma:hover {
    color: #ffffff;
}

.btn-remove {
    padding: .15rem .4rem !important;
    font-size: .9rem !important;
}