/* ================================
   BRAND TOKENS
================================ */
:root {
    --brand: #E879A7;
    --brand-rgb: 232, 121, 167;
    --brand-light: #F5C6DA;
    --brand-dark: #d65f91;
}

/* ================================
   TEXT
================================ */
.text-brand {
    color: var(--brand) !important;
}

/* ================================
   BACKGROUND
================================ */
.bg-brand {
    background-color: var(--brand) !important;
    color: #fff;
}

.bg-brand-light {
    background-color: var(--brand-light) !important;
}

/* ================================
   BUTTON
================================ */
.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);

    --bs-btn-active-bg: #c94f83;
    --bs-btn-active-border-color: #c94f83;

    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

/* outline */
.btn-outline-brand {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);

    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-color: #fff;
}

/* ================================
   LINK
================================ */
.link-brand {
    color: var(--brand);
}

.link-brand:hover {
    color: var(--brand-dark);
}

/* ================================
   BADGE
================================ */
.badge-brand {
    background-color: var(--brand);
}

/* ================================
   CARD / UI FEEL
================================ */
.card-brand {
    border-top: 3px solid var(--brand);
}

/* ================================
   FORM FOCUS
================================ */
.form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .25);
}