:root {
    /* Front Office Colors */
    --fo-primary-color: #01398e;
    --fo-secondary-color: #afd332;
    --fo-primary-button-color: #003380;
    --fo-secondary-button-color: #6c757d;
    --fo-text-color: #212529;
    
    /* Font Sizes */
    --base-font-size: 1rem;
    --h1-font-size: 2.5rem;
    --h2-font-size: 2rem;
    --h3-font-size: 1.75rem;
    --h4-font-size: 1.5rem;
    --h5-font-size: 1.25rem;
    --h6-font-size: 1rem;
    --small-text-font-size: 0.875rem;
    --button-font-size: 1rem;
}

/* Apply colors to Bootstrap elements */
body {
    color: var(--fo-text-color);
    font-size: var(--base-font-size);
}

.btn-primary {
    background-color: var(--fo-primary-button-color);
    border-color: var(--fo-primary-button-color);
    font-size: var(--button-font-size);
}

.btn-primary:hover {
    background-color: color-mix(in srgb, var(--fo-primary-button-color) 85%, black);
    border-color: color-mix(in srgb, var(--fo-primary-button-color) 85%, black);
}

.btn-secondary {
    background-color: var(--fo-secondary-button-color);
    border-color: var(--fo-secondary-button-color);
    font-size: var(--button-font-size);
}

.btn-secondary:hover {
    background-color: color-mix(in srgb, var(--fo-secondary-button-color) 85%, black);
    border-color: color-mix(in srgb, var(--fo-secondary-button-color) 85%, black);
}

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

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

.text-primary {
    color: var(--fo-primary-color) !important;
}

.text-secondary {
    color: var(--fo-secondary-color) !important;
}

/* Apply font sizes to headings */
h1, .h1 { font-size: var(--h1-font-size); }
h2, .h2 { font-size: var(--h2-font-size); }
h3, .h3 { font-size: var(--h3-font-size); }
h4, .h4 { font-size: var(--h4-font-size); }
h5, .h5 { font-size: var(--h5-font-size); }
h6, .h6 { font-size: var(--h6-font-size); }
small, .small { font-size: var(--small-text-font-size); }

/* Remove underline from buttons on hover */
.btn:hover,
.btn:focus,
.btn:active,
a.btn:hover,
a.btn:focus,
a.btn:active {
    text-decoration: none !important;
}