/* File Name: variables.css
 * Description: Global variables and styles for the theme.
 * Use: Loaded on every page.
 * Dependencies: None.
 * Last Edit: 12/30/2024 - Code organization and cleanup.
 */


/*
==================================================
VARIABLES
==================================================
*/

:root {
    --brand-color-1:#00478f;
    --brand-accent-color-1: #0060C2;
    --brand-color-2:#ff5d00;
    --brand-accent-color-2: #FF7D33;
    --color-pop-subtle: #FFEBDF;
    --text-white: #fff;
}

/*
==================================================
GLOBAL OVERRIDES
==================================================
*/

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.font-display {
    font-family: 'Poppins', sans-serif;
}

h1 {
    font-size: 3em;
    padding-bottom: 2rem;
}

p {
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* For older browsers that don't support scroll-margin */
@supports not (scroll-margin-top: 100px) {
    :target::before {
        content: "";
        display: block;
        height: 100px; /* Same as scroll-margin-top */
        margin-top: -100px;
        visibility: hidden;
        pointer-events: none;
    }
}

/*
==================================================
BOOTSTRAP OVERRIDES
==================================================
*/

.text-primary {
    color: var(--brand-color-1);
}

.badge.bg-success-subtle {
    background-color: var(--color-pop-subtle) !important;
}

.text-success-emphasis {
    color: var(--brand-color-1) !important;
}


/*
==================================================
BRAND COLOR CLASSES
==================================================
*/

.brand-color-1 {
    color: var(--brand-color-1);
}

.brand-color-2 {
    color: var(--brand-color-2);
}

a.brand-color-2-hover:hover {
    color: var(--brand-color-2);
}

.brand-accent-color-2 {
    color: var(--brand-accent-color-2);
}

.brand-accent-color-2-bg {
    background-color: var(--brand-accent-color-2);
}

/*
==================================================
BUTTON STYLES
==================================================
*/

.btn-pop {
    --bs-btn-color: var(--text-white);
    --bs-btn-bg: var(--brand-color-2);
    --bs-btn-border-color: var(--brand-color-2);
    --bs-btn-hover-color: var(--text-white);
    --bs-btn-hover-bg: var(--brand-accent-color-2);
    --bs-btn-hover-border-color: var(--brand-accent-color-2);
    --bs-btn-active-color: var(--text-white);
    --bs-btn-active-bg: var(--brand-accent-color-2);
    --bs-btn-active-border-color: var(--brand-accent-color-2);
    --bs-btn-focus-shadow-rgb: 217, 70, 239;
}

.btn.btn-primary,
.btn.btn-success {
    --bs-btn-color: var(--text-white) !important;
    --bs-btn-bg: var(--brand-color-1) !important;
    --bs-btn-border-color: var(--brand-color-1) !important;
    --bs-btn-hover-color: var(--text-white) !important;
    --bs-btn-hover-bg: var(--brand-accent-color-1) !important;
    --bs-btn-hover-border-color: var(--brand-accent-color-1) !important;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-accent-color-1) !important;
    --bs-btn-active-border-color: var(--brand-accent-color-1) !important;
}

.btn.btn-outline-primary {
    --bs-btn-color: var(--brand-color-1) !important;
    --bs-btn-border-color: var(--brand-color-1) !important;
    --bs-btn-hover-color: var(--text-white) !important;
    --bs-btn-hover-bg: var(--brand-accent-color-1) !important;
    --bs-btn-hover-border-color: var(--brand-accent-color-1) !important;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: var(--text-white) !important;
    --bs-btn-active-bg: var(--brand-accent-color-1) !important;
    --bs-btn-active-border-color: var(--brand-accent-color-1) !important;
    --bs-btn-active-shadow:
}