:root {
    --color-teal-light: 77, 182, 172;
    --kompendium-contrast-1100: 94, 94, 108;
}
body {
    --md-text-font-family: "Lato", sans-serif;
}

[data-md-color-scheme="teal"] {
    --md-default-fg-color--light: rgb(71, 71, 86);
    --md-default-bg-color: rgb(250, 250, 251);
    --md-code-bg-color: rgb(var(--kompendium-contrast-1100), 0.05);
}
[data-md-color-scheme="teal"] .md-typeset code {
    border: 1px solid rgb(var(--kompendium-contrast-1100), 0.1);
}

[data-md-color-scheme="slate"] {
    --md-primary-fg-color: rgb(25, 25, 44);
    --md-primary-fg-color--light: rgb(35, 35, 53);
    /* Slate theme uses HSL, so the hue of --md-primary-fg-color is used */
    --md-hue: 240;
    --md-default-bg-color: var(--md-primary-fg-color--light);
    --md-code-bg-color: var(--md-primary-fg-color);

    --md-accent-fg-color: rgb(30, 136, 229);
    --md-typeset-a-color: var(--md-accent-fg-color);
}

[data-md-color-scheme="slate"] .md-logo {
    color: rgb(var(--color-teal-light));
}

[data-md-color-scheme="slate"] .md-nav {
    color: rgb(140, 140, 150);
    font-size: 16px;
}

[data-md-color-scheme="slate"] .md-button:not(.md-button--primary) {
    color: var(--md-primary-bg-color);
    border-color: var(--md-primary-fg-color);
}

[data-md-color-scheme="slate"] h1,
[data-md-color-scheme="slate"] h2,
[data-md-color-scheme="slate"] h3,
[data-md-color-scheme="slate"] h4,
[data-md-color-scheme="slate"] h5,
[data-md-color-scheme="slate"] h6 {
    color: rgb(232, 232, 234);
}

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

.md-typeset h2, h3, h4, h5, h6 {
    font-weight: 500;
}