:root {
        --color-bg: #ffffff;
    --color-fg: #111111;
    --color-primary: #011728;
    --color-on-primary: #ffffff;
    --color-secondary: #B61616;
    --color-on-secondary: #ffffff;

    --font-body: Inter, sans-serif;
    --font-heading: Inter, sans-serif;
    --color-success: #0d7a3b;
    --color-on-success: #ffffff;
    --color-danger: #9a1d1d;
    --color-on-danger: #ffffff;
}

        .theme-light {
        --color-bg: #ffffff;
    --color-fg: #111111;
    --color-primary: #011728;
    --color-on-primary: #ffffff;
    --color-secondary: #B61616;
    --color-on-secondary: #ffffff;

    background-color: var(--color-bg);
    color: var(--color-fg);
}
            .theme-dark {
        --color-bg: #011728;
    --color-fg: #ffffff;
    --color-primary: #ffffff;
    --color-on-primary: #011728;
    --color-secondary: #F05D23;
    --color-on-secondary: #011728;

    background-color: var(--color-bg);
    color: var(--color-fg);
}
            .theme-orange {
        --color-bg: #F05D23;
    --color-fg: #011728;
    --color-primary: #011728;
    --color-on-primary: #ffffff;
    --color-secondary: #ffffff;
    --color-on-secondary: #011728;

    background-color: var(--color-bg);
    color: var(--color-fg);
}
    
body {
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-body), sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading), sans-serif;
}

.external-link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    color: inherit;
    text-decoration: none;
}

.external-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.external-link-icon {
    width: 0.78em;
    height: 0.78em;
    flex-shrink: 0;
    transform: translateY(0.06em);
}

.spsc-home-hero {
    background-color: var(--color-bg);
    background-image:
        linear-gradient(90deg, rgba(3, 42, 68, 0.82), rgba(3, 42, 68, 0.52)),
        url("/assets/static/home-hero-bg.jpg");
    background-blend-mode: normal;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
}

.spsc-section-kicker {
    margin: 0;
    color: var(--color-secondary);
    font-family: var(--font-heading), sans-serif;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.header .header-nav {
    padding-block: 0.375rem;
}

.header .header-logo img,
.header .header-logo svg {
    height: 5rem;
    width: auto;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: fit-content;
    max-width: min(18rem, 100%);
}

.footer-logo-mark {
    height: 7rem;
    width: auto;
    max-width: 100%;
}

.footer-social {
    column-gap: 0.5rem;
    row-gap: 0.5rem;
}

.footer-social-link {
    width: 2rem;
    height: 2rem;
}

.footer-social-icon {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 767px) {
    .header .header-logo img,
    .header .header-logo svg {
        height: 4rem;
    }

    .footer-logo-mark {
        height: 5.5rem;
    }
}