/* JPL Spatial theme overides */

@font-face {
    font-family: "IBM Plex Sans";
    src: url("IBMPlexSans-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 700;
    font-stretch: 75% 100%;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("IBMPlexSans-Italic-Variable.ttf") format("truetype");
    font-style: italic;
    font-weight: 100 700;
    font-stretch: 75% 100%;
    font-display: swap;
}

html {
    --primary-color: #087f78;
    --primary-dark-color: #075f5a;
    --primary-light-color: #b9ebe5;
    --on-primary-color: #ffffff;
    --link-color: #007d86;

    --accent-gold: #a66f10;
    --accent-gold-soft: rgba(166, 111, 16, 0.14);
    --on-accent-gold: #ffffff;

    --page-background-color: #fbfcfb;
    --page-foreground-color: #182321;
    --page-secondary-foreground-color: #687471;
    --separator-color: #dce2df;

    --header-background: #fbfcfb;
    --side-nav-background: #f3f6f4;
    --code-background: #edf2f0;
    --fragment-background: #f5f7f6;
    --fragment-foreground: #243330;
    --tablehead-background: #edf2ef;
    --blockquote-background: #f1f5f3;

    --box-shadow: 0 3px 14px rgba(29, 48, 43, 0.07);
}

html.dark-mode {
    --primary-color: #6bd6d3;
    --primary-dark-color: #82ddd5;
    --primary-light-color: #174b47;
    --on-primary-color: #071715;
    --link-color: #6bd6d3;

    --accent-gold: #e0aa45;
    --accent-gold-soft: rgba(224, 170, 69, 0.17);
    --on-accent-gold: #1b1509;

    /* Deliberately neutral graphite, with almost no blue component. */
    --page-background-color: #141515;
    --page-foreground-color: #dedfdd;
    --page-secondary-foreground-color: #999d99;
    --separator-color: #303331;

    --header-background: #151616;
    --side-nav-background: #191a1a;
    --searchbar-background: #202222;

    --code-background: #202222;
    --fragment-background: #1b1d1c;
    --fragment-foreground: #d9ddda;
    --tablehead-background: #222422;
    --blockquote-background: #1d201e;

    --box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);

    --fragment-keyword: #d7a85a;
    --fragment-keywordtype: #65cfc4;
    --fragment-keywordflow: #e6bd72;
    --fragment-token: #9bc98e;
    --fragment-comment: #7f8782;
    --fragment-preprocessor: #56bdb4;
}

::selection {
    color: var(--on-accent-gold);
    background: var(--accent-gold);
}

/* The active item marker in the left navigation. */
#nav-tree .selected::after {
    background: var(--accent-gold);
}

#nav-tree .selected,
#nav-tree .selected a {
    color: var(--accent-gold) !important;
}

/* Current top-navigation item. */
.tablist li.current {
    background: var(--accent-gold-soft);
}

/* Small labels such as static/constexpr indicators. */
span.mlabel {
    color: var(--on-accent-gold);
    background: var(--accent-gold);
}

html,
html.dark-mode,
html.light-mode {
    --font-family:
        "IBM Plex Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}