/* ─── Color tokens ─────────────────────────────────────────────────────────── */

/* Light mode */
[data-md-color-scheme="default"] {
    --md-primary-fg-color:        #0000aa;  /* Midnight Mati — headers, sidebar */
    --md-primary-fg-color--light: #3333cc;
    --md-primary-fg-color--dark:  #000080;
    --md-accent-fg-color:         #000080;  /* Aegean — active tabs, interactive */

    --md-default-bg-color:        #fff;
    --md-primary-bg-color:        #fff;
    --md-typeset-a-color:         #000080;
    --md-typeset-color:           #111;
}

/* Dark mode */
[data-md-color-scheme="slate"] {
    --md-primary-fg-color:        #0000aa;
    --md-primary-fg-color--light: #3333cc;
    --md-primary-fg-color--dark:  #000066;
    --md-accent-fg-color:         #4d4dff;  /* lightened Aegean for dark-bg contrast */

    --md-default-bg-color:        #1e1e1e;
    --md-primary-bg-color:        #fff;     /* text/icons on the Midnight Mati header */
    --md-typeset-a-color:         #7777ff;  /* lightened link for dark-bg contrast */
    --md-typeset-color:           #f0f0f0;
}

/* ─── Typography ───────────────────────────────────────────────────────────── */

html {
    font-size: 16px;
}

.md-typeset {
    font-size: 1rem; /* 16px — overrides Material's default .8rem */
}

/* Navigation — IBM Plex Sans at explicit px sizes */
.md-nav,
.md-tabs,
.md-header__title,
.md-nav__title,
.md-nav__link,
.md-tabs__link,
.md-ellipsis {
    font-family: "IBM Plex Sans", sans-serif;
}

.md-tabs__link {
    font-size: 16px;
    font-weight: 600;
}

.md-nav__title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.md-nav__link {
    font-size: 15px;
    font-weight: 400;
}

/* LaTeX / numerical displays — IBM Plex Mono */
.md-typeset .arithmatex {
    font-family: "IBM Plex Mono", monospace;
}

.md-typeset h1 {
    font-weight: 700;
}

/* ─── Logo — absolute-positioned, spanning full header height ─────────────── */

.md-header {
    position: relative;
}

.md-header__button.md-logo {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    margin: 0;
    padding: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    height: 36px;
    width: auto;
}

/* Clear the logo column */
.md-header__inner {
    padding-left: 96px;
}

.md-tabs .md-grid {
    padding-left: 96px;
}

/* Site title */
.md-header__title {
    font-size: 28px;
    font-weight: 700;
}

/* ─── Corner radii — 8px everywhere ───────────────────────────────────────── */

.md-typeset .admonition,
.md-typeset details,
.md-typeset .tabbed-set > input + .tabbed-content,
.md-typeset code,
.md-typeset pre > code {
    border-radius: 8px;
}

.md-button,
.md-search__form,
.md-search__input {
    border-radius: 8px !important;
}

/* ─── Interactive states ───────────────────────────────────────────────────── */

.md-typeset a:hover {
    text-decoration: underline;
}

.md-nav__link--active,
.md-nav__link:hover {
    color: var(--md-accent-fg-color);
}