/* phase-c154.2-brand-color-tokens: site colors. Every selector mirrors style.css exactly and this file
   is linked right after it, so it wins each tie. Values are brand tokens only. */
body {
    background-color: var(--brand-paper);
    color: var(--brand-slate);
}

a {
    color: var(--brand-slate);
}

.NavLink {
    color: var(--brand-slate);
}

.nav-list-item {
    color: var(--brand-slate);
}

.nav-list-item a:hover {
    color: var(--brand-teal-deep);
}

.login-btn {
    background-color: var(--brand-teal-deep);
    color: var(--brand-on-dark);
}

.LearnMoreButton {
    background-color: var(--brand-teal-deep);
    color: var(--brand-on-dark);
}

form input[type="submit"], form button {
    background-color: var(--brand-teal-deep);
    color: var(--brand-on-dark);
}

.login-btn:hover {
    background-color: var(--brand-slate);
}

form input[type="submit"]:hover {
    background-color: var(--brand-slate);
}

.LearnMoreButton:hover {
    background-color: var(--brand-accent);
    color: var(--brand-slate);
}

h2 {
    color: var(--brand-teal);
}

footer {
    background-color: var(--brand-slate);
    color: var(--brand-on-dark);
    border-top: 4px solid var(--brand-mint);
}

footer a {
    color: var(--brand-on-dark);
}

.CTAHome {
    background-color: var(--brand-slate);
}