/*
  docs.pelton.app styling: the same tokens the app uses (tokens.css) mapped
  onto the theme's CSS variables, plus the app's bundled fonts. No external
  requests anywhere in here.
*/

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/familjen-grotesk-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/familjen-grotesk-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/familjen-grotesk-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/familjen-grotesk-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/spline-sans-mono-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/spline-sans-mono-latin-700-normal.woff2") format("woff2");
}

:root {
  --md-text-font: "Familjen Grotesk", system-ui, -apple-system, sans-serif;
  --md-code-font: "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace;
  --pelton-accent: #465af2;
}

/* light: Pelton's light token set. */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #f6f6f7;
  --md-default-fg-color: #1a1b1e;
  --md-default-fg-color--light: #4a4d54;
  --md-default-fg-color--lighter: #797d86;
  --md-default-fg-color--lightest: rgba(0, 0, 0, 0.06);
  --md-primary-fg-color: var(--pelton-accent);
  --md-accent-fg-color: var(--pelton-accent);
  --md-typeset-a-color: var(--pelton-accent);
  --md-code-bg-color: #efeff1;
  --md-code-fg-color: #1a1b1e;
  --md-footer-bg-color: #efeff1;
  --md-footer-bg-color--dark: #efeff1;
  --md-footer-fg-color: #4a4d54;
  --md-footer-fg-color--light: #797d86;
  --md-footer-fg-color--lighter: #797d86;
}

/* dark: Pelton's dark token set; links lighten like the app does. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #111214;
  --md-default-fg-color: #ecedee;
  --md-default-fg-color--light: #b4b7bd;
  --md-default-fg-color--lighter: #7e828b;
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.06);
  --md-primary-fg-color: var(--pelton-accent);
  --md-accent-fg-color: color-mix(in srgb, var(--pelton-accent) 72%, white);
  --md-typeset-a-color: color-mix(in srgb, var(--pelton-accent) 72%, white);
  --md-code-bg-color: #1a1c1f;
  --md-code-fg-color: #ecedee;
  --md-footer-bg-color: #161719;
  --md-footer-bg-color--dark: #161719;
  --md-footer-fg-color: #b4b7bd;
  --md-footer-fg-color--light: #7e828b;
  --md-footer-fg-color--lighter: #7e828b;
}

/* the app's header is a flat surface with a hairline, not an accent bar. */
.md-header,
.md-tabs {
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: none;
}

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

/* 5px radii everywhere, like the app's radius tokens. */
.md-typeset code,
.md-typeset pre > code,
.md-typeset .admonition,
.md-typeset details,
.md-typeset .tabbed-set,
.md-search__form {
  border-radius: 5px;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 600;
  color: var(--md-default-fg-color);
}

/* landing page card grid follows the app's raised-surface card look. */
.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 5px;
  background: var(--md-code-bg-color);
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--pelton-accent);
}