:root {
    /* Brand (Primary Source) */
    --pri: #242A68;
    --sec: #EA392B;

    /* Derived Brand Colors */
    --primary-color: var(--pri);
    --secondary-color: #F3F3FF;
    /* light background tint */
    --accent-color: #4753BF;
    --accent-color-two: #506CD7;

    /* Base */
    --white: #ffffff;
    --dark: #111111;
    --lite: #f8f8f8;

    /* Text */
    --text-color: #556171;

    /* Dividers */
    --divider-color: rgba(85, 97, 113, 0.14);
    --dark-divider-color: rgba(255, 255, 255, 0.14);

    /* Status */
    --error-color: rgb(230, 87, 87);

    /* Typography */
    --default-font: "DM Sans", sans-serif;
}

/* Text Colors */
.txt-pri {
    color: var(--pri) !important;
}

.txt-sec {
    color: var(--sec) !important;
}

.txt-white {
    color: var(--white) !important;
}

.txt-dark {
    color: var(--dark) !important;
}

/* Background Colors */
.bg-pri {
    background-color: var(--pri) !important;
}

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

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

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

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

/* Border Colors */
.brd-pri {
    border-color: var(--pri) !important;
}

.brd-sec {
    border-color: var(--sec) !important;
}

/* Buttons */
.btn-pri {
    background-color: var(--pri);
    color: var(--white);
}

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