/* ==========================================================================
   Interloper brand palette
   Light chrome, the logo blue as brand accent and link colour; code blocks
   keep the theme defaults.
   ========================================================================== */

:root {
    --il-blue: #2f7cf6;
    --il-blue-dark: #1f66db;
    --il-blue-light: #6aa2f9;
    --il-slate-900: #0f172a;
    --il-slate-600: #475569;
    --il-gray-100: #f1f5f9;
    --il-gray-50: #f7f8f9;
}

/* Custom primary (blue): drives active states, the tab indicator, etc. */
[data-md-color-primary=custom] {
    --md-primary-fg-color: var(--il-blue);
    --md-primary-fg-color--light: var(--il-blue-light);
    --md-primary-fg-color--dark: var(--il-blue-dark);
    --md-primary-bg-color: #ffffff;
    --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

/* Custom accent (blue): link hover and interactive accents. */
[data-md-color-accent=custom] {
    --md-accent-fg-color: var(--il-blue);
    --md-accent-fg-color--transparent: rgba(47, 124, 246, 0.1);
    --md-accent-bg-color: #ffffff;
}

/* Blue links, like the console. */
:root {
    --md-typeset-a-color: var(--il-blue);
}

/* --------------------------------------------------------------------------
   White header + tabs bar with dark text, decoupled from the blue primary so
   the blue still drives the active tab underline.
   -------------------------------------------------------------------------- */
.md-header {
    background-color: #ffffff;
    color: var(--il-slate-900);
    box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.05), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05);
}

.md-tabs {
    background-color: #ffffff;
    color: var(--il-slate-900);
    border-bottom: 0.05rem solid rgba(0, 0, 0, 0.07);
}

/* Active / hovered tab uses the blue accent. */
.md-tabs__link--active,
.md-tabs__link:hover {
    color: var(--il-blue-dark);
    opacity: 1;
}

/* Gray search field, like the console's "Search… ⌘K". */
.md-search__form {
    background-color: var(--il-gray-100);
    color: var(--il-slate-900);
    border-radius: 0.4rem;
}

.md-search__form:hover {
    background-color: #e7ebf0;
}

.md-search__input::placeholder,
.md-search__icon {
    color: var(--il-slate-600);
}

/* ==========================================================================
   Dark scheme (slate): the header and tabs follow the page background and
   the accent shifts to the lighter blue for contrast.
   ========================================================================== */
[data-md-color-scheme=slate] {
    --md-typeset-a-color: var(--il-blue-light);
}

[data-md-color-scheme=slate] .md-header,
[data-md-color-scheme=slate] .md-tabs {
    background-color: var(--md-default-bg-color);
    color: var(--md-default-fg-color);
}

[data-md-color-scheme=slate] .md-header {
    box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.3), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.3);
}

[data-md-color-scheme=slate] .md-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

[data-md-color-scheme=slate] .md-tabs__link--active,
[data-md-color-scheme=slate] .md-tabs__link:hover {
    color: var(--il-blue-light);
}

[data-md-color-scheme=slate] .md-search__form {
    background-color: var(--md-code-bg-color);
    color: var(--md-default-fg-color);
}

[data-md-color-scheme=slate] .md-search__form:hover {
    background-color: var(--md-code-bg-color--light, var(--md-code-bg-color));
}

[data-md-color-scheme=slate] .md-search__input::placeholder,
[data-md-color-scheme=slate] .md-search__icon {
    color: var(--md-default-fg-color--light);
}

/* ==========================================================================
   Landing page helpers
   ========================================================================== */
.center {
    text-align: center;
}

.title {

    h1 {
        font-size: 3em;
        margin-bottom: 0.5em;
    }

    h2 {
        font-size: 3em;
        font-weight: bold;
        margin: 0 0 1.5em;
    }
}