/* LogDog brand on top of Material: the colors and type of logdog.gg.
   Tokens come from the landing page (src/app/globals.css); keep them in step.
   Fonts are the latin subsets from the landing build, self-hosted so pages make no
   request to Google Fonts (theme.font is off in mkdocs.yml). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  --md-text-font: "Inter";
  --ld-display-font: "Space Grotesk", var(--md-text-font-family);
  --ld-navy: #0b1120;
  --ld-navy-card: #111a2e;
  --ld-navy-border: #26324f;
}

/* Light: white pages, indigo links and buttons, teal on hover. */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #4f46e5;
  --md-primary-fg-color--light: #6366f1;
  --md-primary-fg-color--dark: #4338ca;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgb(255 255 255 / 70%);
  --md-accent-fg-color: #0f766e;
  --md-accent-fg-color--transparent: rgb(15 118 110 / 10%);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgb(255 255 255 / 70%);
  --md-typeset-a-color: #4f46e5;
  --md-footer-bg-color: var(--ld-navy-card);
  --md-footer-bg-color--dark: var(--ld-navy);
}

/* Dark: the landing page's navy. */
[data-md-color-scheme="slate"] {
  --md-hue: 222deg;
  --md-default-fg-color: rgb(226 232 240 / 87%);
  --md-default-fg-color--light: rgb(226 232 240 / 62%);
  --md-default-fg-color--lighter: rgb(226 232 240 / 34%);
  --md-default-fg-color--lightest: rgb(226 232 240 / 12%);
  --md-default-bg-color: var(--ld-navy);
  --md-default-bg-color--light: rgb(11 17 32 / 54%);
  --md-default-bg-color--lighter: rgb(11 17 32 / 26%);
  --md-default-bg-color--lightest: rgb(11 17 32 / 7%);
  --md-code-bg-color: var(--ld-navy-card);
  --md-footer-bg-color: var(--ld-navy-card);
  --md-footer-bg-color--dark: var(--ld-navy);
  --md-primary-fg-color: #4f46e5;
  --md-primary-fg-color--light: #6366f1;
  --md-primary-fg-color--dark: #4338ca;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgb(255 255 255 / 70%);
  --md-accent-fg-color: #2dd4bf;
  --md-accent-fg-color--transparent: rgb(45 212 191 / 10%);
  --md-accent-bg-color: var(--ld-navy);
  --md-accent-bg-color--light: rgb(11 17 32 / 70%);
  --md-typeset-a-color: #818cf8;
}

/* The header is navy in both schemes, like logdog.gg and the dashboard. */
.md-header {
  background-color: var(--ld-navy);
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-header {
  box-shadow: inset 0 -1px 0 var(--ld-navy-border);
}

.md-header__button.md-logo img {
  height: 1.5rem;
  border-radius: 0.3rem;
}

.md-header__title,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: var(--ld-display-font);
}

.md-header__title {
  font-weight: 600;
}

.md-typeset h1 {
  color: var(--md-default-fg-color);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.md-typeset h2 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-typeset h3 {
  font-weight: 600;
}