:root {
    /* --color-primary: #3F51B5; */
    --color-primary: #F7525A;
    --color-accent: #3F51B5;

    --color-secondary: #2C3E50;

    --color-success: #18BC9C;
    --color-info: #3498DB;
    --color-warning: #FFC107;
    --color-danger: #D7263D;

    --sidebar-bg: #1A1D21;
    --topbar-bg: #f7f7fe;


    /* Optional radius + shadows for more modern feel */
    --radius: 0.5rem;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.15);

    --topbar-search-box-expand-width: 400px;
}

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

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

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

.btn-warning {
    background-color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
}

.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: rgba(247, 82, 90, 0.9) !important;
}

.btn-accent {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
}

.btn-accent:hover {
    background-color: rgba(63, 81, 181, 0.9) !important;
}


/* ========= OUTLINE BUTTONS ========= */
/* Primary Outline */
.btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

/* Accent Outline */
.btn-outline-accent {
    color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    background-color: transparent !important;
}

.btn-outline-accent:hover,
.btn-outline-accent:focus {
    background-color: var(--color-accent) !important;
    color: #fff !important;
}

/* Secondary Outline */
.btn-outline-secondary {
    color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    background-color: transparent !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--color-secondary) !important;
    color: #fff !important;
}

/* Danger Outline */
.btn-outline-danger {
    color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    background-color: transparent !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: var(--color-danger) !important;
    color: #fff !important;
}

/* Success Outline */
.btn-outline-success {
    color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    background-color: transparent !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: var(--color-success) !important;
    color: #fff !important;
}