:root {
    /* Font faces */
    --ff-primary: "Playpen Sans", cursive;
    --ff-secondary: "note-this", cursive;

    --bs-body-font-family: var(--ff-primary);

    --clr-white: #ffffff;
    --clr-natural-caramel: #d97941; /* Fox Orange */
    --clr-natural-caramel-rgb: 217, 121, 65;
    --clr-blue-blood: #6096b4; /* Scarf Blue */
    --clr-blue-blood-rgb: 96, 150, 180;
    --clr-fashion-white: #f7f3e9; /* Creamy Background */
    --clr-tobago: #3e2723; /* Dark Brown Text */
    --clr-artichoke: #8da47e; /* Book Green */

    --bs-primary: var(--clr-natural-caramel);
    --bs-primary-rgb: var(--clr-natural-caramel-rgb);
    --bs-secondary: var(--clr-blue-blood);
    --bs-secondary-rgb: var(--clr-blue-blood-rgb);
    --bs-body-bg: var(--clr-fashion-white);
    --bs-body-color: var(--clr-tobago);
    --bs-success: var(--clr-artichoke);
}

.font-secondary {
    font-family: var(--ff-secondary);
}

.btn-primary {
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    color: var(--clr-white);
}

.btn-secondary {
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    color: var(--clr-white);
}

.form-control:focus {
    border-color: var(--bs-secondary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-rgb), 0.25);
}

.card {
    background-color: var(--clr-white);
    border: none;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(62, 39, 35, 0.05);
}

a {
    color: var(--clr-tobago);
    text-decoration: underline;
}
a:hover {
    color: var(--clr-blue-blood);
}

.text-balance {
    text-wrap: balance;
}