:root {
    --ut-dark: #333f48;
    --ut-light: #ffffff;
    --ut-burnt-orange: #bf5700;
    --ut-orange: #f8971f;
    --ut-yellow: #ffd600;
    --ut-lime: #a6cd57;
    --ut-green: #579d42;
    --ut-teal: #00a9b7;
    --ut-blue: #005f86;
    --ut-stone: #9cadb7;
    --ut-ecru: #d6d2c4;
    --ut-serif-font: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}

h1, h2, h3 {
    color: var(--ut-blue);
}

input.btn.btn-primary {
    background-color: var(--ut-burnt-orange);
    border-color: var(--ut-burnt-orange);

    &#submit_search {
        /* This button's color is set by a more specific CSS selector (#submit_search) */
        background-color: var(--ut-burnt-orange);
        border-color: var(--ut-burnt-orange);
    }
}

#header {
    > .row {
        border-color: var(--ut-burnt-orange);
    }

    .h1 {
        color: var(--ut-blue);
        font-family: var(--ut-serif-font);
    }
}

#navigation {
    nav {
        background-color: var(--ut-blue) !important; /* This is marked !important in the base CSS, so we have to override with it */
    }

    #collapsemenu {
        /* This menu behaves differently depending on layout width, so this split border coloration is meant to accommodate that a bit */
        border-top-color: var(--ut-burnt-orange);
        border-bottom-color: color-mix(in hsl, var(--ut-blue), black 10%);

        &.top-bar {
            background-color: var(--ut-blue) !important; /* This is marked !important in the base CSS, so we have to override with it */

            .nav-link {
                color: var(--ut-light);
            }
        }
    }
}

#content .accordion-toggle {
    a {
        color: var(--ut-blue);
    }
}