:root {
    /* === Custom theme variables === */
    --my-primary: rgba(19, 28, 69, 1); /* Deep navy blue */
    --my-secondary: rgba(108, 117, 125, 1); /* Bootstrap's secondary gray */
    --my-disabled: rgba(238, 242, 247, 1); /* Light gray for disabled */

    --my-bg-primary: rgba(19, 28, 69, 1);
    --my-bg-secondary: rgba(108, 117, 125, 1);
    --my-bg-disabled: rgba(238, 242, 247, 1);
    --my-text-on-primary: #ffffff;
    --my-text-on-secondary: #ffffff;
    --my-text-on-disabled: #8a969c;
    --my-font-family: 'Roboto', sans-serif;
}

body {
    /* === Mapped variables for use throughout the app === */
    --bg-primary: var(--my-bg-primary);
    --bg-secondary: var(--my-bg-secondary);
    --bg-disabled: var(--my-bg-disabled);
    --text-primary: var(--my-primary);
    --text-secondary: var(--my-secondary);
    --text-disabled: var(--my-disabled);
    --text-on-primary: var(--my-text-on-primary);
    --text-on-secondary: var(--my-text-on-secondary);
    --text-on-disabled: var(--my-text-on-disabled);
    font-family: var(--my-font-family) !important;
}

/* === Primary button styles === */
.btn-primary {
    background-color: var(--bg-primary);
    color: var(--text-on-primary);
    border: none;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: #0f173a;
    }

    .btn-primary:active {
        background-color: #0c1230;
    }

    .btn-primary:disabled {
        background-color: var(--bg-disabled);
        color: var(--text-on-disabled);
        opacity: 0.65;
        cursor: not-allowed;
    }

/* === Secondary button styles === */
.btn-secondary {
    background-color: var(--bg-secondary);
    color: var(--text-on-secondary);
    border: none;
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        background-color: #5c636a;
    }

    .btn-secondary:active {
        background-color: #51585e;
    }

    .btn-secondary:disabled {
        background-color: var(--bg-disabled);
        color: var(--text-on-disabled);
        opacity: 0.65;
        cursor: not-allowed;
    }

/* === Background utility classes === */
.bg-primary {
    background-color: var(--bg-primary) !important;
    color: var(--text-on-primary) !important;
}

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

.bg-disabled {
    background-color: var(--bg-disabled) !important;
    color: var(--text-on-disabled) !important;
}

/* === Text color utility classes === */
.text-primary {
    color: var(--text-primary) !important;
}

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

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

/* === Border color utility classes === */
.border-primary {
    border-color: var(--text-primary) !important;
}

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

.border-disabled {
    border-color: var(--text-disabled) !important;
}

/* === Link hover styles === */
a.text-primary:hover,
a.text-primary:focus {
    color: #0c1230 !important;
}

a.text-secondary:hover,
a.text-secondary:focus {
    color: #51585e !important;
}

a.text-disabled {
    pointer-events: none;
    color: var(--text-disabled) !important;
}

/* === Focus ring for accessibility === */
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: 3px solid rgba(19, 28, 69, 0.5);
    outline-offset: 2px;
}

/* === Placeholder text style === */
::placeholder {
    color: var(--text-disabled);
    opacity: 1;
}

/* === Tabs style === */
.nav-item > .nav-link.active {
    color: var(--my-text-on-primary) !important;
    background-color: var(--bg-primary) !important;
}

/* === Input style === */
.form-check-input:checked {
    background-color: var(--bg-primary);
    border-color: var(--bg-primary);
}

/* === Pagination style === */
.page-item.page-link-active > a {
    z-index: 3 !important;
    color: var(--my-text-on-primary) !important;
    background-color: var(--bg-primary) !important;
    border-color: var(--bg-primary) !important;
}

/* === Styles for disabled form fields === */
*:disabled:not(.enabled-input):not([type="checkbox"]),
[aria-disabled="true"]:not(.input-file) {
    background-color: var(--bg-disabled) !important;
    color: var(--my-text-on-disabled) !important;
}