/*Your palette: #FECD07 (Primary / Accent) #DE1F26 (Critical / Alert) #1C1C1C (Text / Headings) #93A8AC (Muted / Secondary) #F3EFF5 (Background) #FFFFFF (Card / Surface)*/


:root {
    --brand-red: #DE1F26;
    --brand-yellow: #FECD07;
    --brand-red-hover: #b9151b;
}

/* =========================
   Buttons
   ========================= */
.btn-primary {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
    border-radius: 12px;
    padding: 12px 16px;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--brand-red-hover);
        border-color: var(--brand-red-hover);
        box-shadow: 0 0 0 .25rem rgba(185, 21, 27, .5);
    }

    .btn-check:active + .btn-primary, .btn-check:checked + .btn-primary, .btn-primary.active, .btn-primary:active, .show > .btn-primary.dropdown-toggle {
        background-color: var(--brand-red);
        border-color: var(--brand-red);
    }

        .btn-check:active + .btn-primary:focus, .btn-check:checked + .btn-primary:focus, .btn-primary.active:focus, .btn-primary:active:focus, .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 .25rem rgba(185, 21, 27, .5);
        }


/* =========================
   Forms
   ========================= */

/* Checkboxes & radios */
.form-check-input:checked {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}

.form-check-input:focus {
    border-color: var(--brand-red-hover);
    box-shadow: 0 0 0 .25rem rgba(185, 21, 27, .5);
}