/* The guide in VectorExpert's look: the colours, type and rules of vectorexpert.com
   (vectorexpert-1/vectorexpert, src/styles/site.css). Paper and ink neutrals, the logo's
   ochre as the accent, Archivo for text and IBM Plex Mono for labels, square corners.
   The fonts are served from here, so the offline copy has them too. */

@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");
  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: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");
}

/* ---------- tokens, as on vectorexpert.com ---------- */
:root,
[data-md-color-scheme="default"] {
  --ve-paper: #EDF0EA;
  --ve-sheet: #F7F9F4;
  --ve-ink: #16201A;
  --ve-ink-2: #47534B;
  --ve-ink-3: #566259;
  --ve-rule: #C7CEC4;
  --ve-rule-strong: #94A096;
  --ve-accent: #E0A234;
  --ve-accent-ink: #8A5D10;
  --ve-on-accent: #16201A;
  /* the search dialog's colours, as "r g b" */
  --color-backdrop: 237 240 234;
  --color-background: 247 249 244;
  --color-background-subtle: 237 240 234;
  --color-foreground: 22 32 26;
}
[data-md-color-scheme="slate"] {
  --ve-paper: #0F1411;
  --ve-sheet: #161C18;
  --ve-ink: #E4EAE2;
  --ve-ink-2: #A5B0A7;
  --ve-ink-3: #7D887F;
  --ve-rule: #2A332D;
  --ve-rule-strong: #4A564D;
  --ve-accent: #E8B04A;
  --ve-accent-ink: #F0C46E;
  --ve-on-accent: #16201A;
  --color-backdrop: 15 20 17;
  --color-background: 22 28 24;
  --color-background-subtle: 15 20 17;
  --color-foreground: 228 234 226;
}

/* The theme's own variables, from the tokens */
:root,
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-text-font: "Archivo Variable";
  --md-code-font: "IBM Plex Mono";
  --ve-f-display: "Archivo Variable", "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --ve-f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --md-default-bg-color: var(--ve-paper);
  --md-default-bg-color--light: var(--ve-sheet);
  --md-default-fg-color: var(--ve-ink);
  --md-default-fg-color--light: var(--ve-ink-2);
  --md-default-fg-color--lighter: var(--ve-ink-3);
  --md-default-fg-color--lightest: var(--ve-rule);

  /* the header is paper with ink on it, as the website's top bar */
  --md-primary-fg-color: var(--ve-paper);
  --md-primary-fg-color--light: var(--ve-sheet);
  --md-primary-fg-color--dark: var(--ve-paper);
  --md-primary-bg-color: var(--ve-ink);
  --md-primary-bg-color--light: var(--ve-ink-2);

  --md-accent-fg-color: var(--ve-ink);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--ve-accent) 14%, transparent);
  --md-accent-bg-color: var(--ve-on-accent);

  --md-typeset-color: var(--ve-ink);
  --md-typeset-a-color: var(--ve-accent-ink);
  --md-typeset-mark-color: color-mix(in srgb, var(--ve-accent) 35%, transparent);
  --md-typeset-table-color: var(--ve-rule);
  --md-typeset-table-color--light: var(--ve-sheet);
  --md-code-bg-color: var(--ve-sheet);
  --md-code-fg-color: var(--ve-ink);

  --md-footer-bg-color: var(--ve-paper);
  --md-footer-bg-color--dark: var(--ve-paper);
  --md-footer-fg-color: var(--ve-ink);
  --md-footer-fg-color--light: var(--ve-ink-2);
  --md-footer-fg-color--lighter: var(--ve-ink-3);
}

body {
  font-variation-settings: "wdth" 100;
}
:focus-visible {
  outline: 2px solid var(--ve-accent);
  outline-offset: 3px;
}

/* ---------- top bar ---------- */
.md-header,
.md-header--shadow {
  background-color: color-mix(in srgb, var(--ve-paper) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--ve-rule);
  box-shadow: none;
}
.md-header__button.md-logo img {
  height: 1.5rem;
}
.md-header__title {
  font-family: var(--ve-f-display);
  font-weight: 750;
  font-variation-settings: "wdth" 115;
  letter-spacing: -0.01em;
}
/* Search opens a dialog; in the bar it is a button */
.md-search__button {
  background-color: var(--ve-sheet);
  border: 1px solid var(--ve-rule-strong);
  border-radius: 2px;
  color: var(--ve-ink-3);
}
.md-search__button:hover {
  background-color: var(--ve-sheet);
  border-color: var(--ve-ink-2);
  color: var(--ve-ink);
}
/* its Ctrl+K key, drawn as the website's labels */
.md-search__button::after {
  background-color: transparent;
  border: 1px solid var(--ve-rule);
  font-family: var(--ve-f-mono);
  color: var(--ve-ink-3);
}

/* the menus' scrollbars: thin rules, not dark bars */
.md-sidebar__scrollwrap {
  scrollbar-color: var(--ve-rule-strong) transparent;
  scrollbar-width: thin;
}

/* ---------- type ---------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: var(--ve-f-display);
  color: var(--ve-ink);
}
.md-typeset h1 {
  font-weight: 750;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.015em;
}
.md-typeset h2 {
  font-weight: 700;
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.01em;
}
.md-typeset h3 {
  font-weight: 650;
  font-variation-settings: "wdth" 104;
}
.md-typeset a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.md-typeset a:hover {
  text-decoration-color: currentColor;
}
.md-typeset .headerlink {
  text-decoration: none;
}

/* Labels in mono capitals, as the website's: the menu's section titles, "On this page",
   table headings and the footer's Previous / Next */
.md-nav--primary .md-nav__item--section > .md-nav__link,
.md-nav--secondary > .md-nav__title,
.md-footer__direction,
.md-typeset table:not([class]) th {
  font-family: var(--ve-f-mono);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ve-ink-3);
}
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--ve-accent-ink);
}

/* ---------- code, keys, tables, screenshots: square, ruled ---------- */
.md-typeset code,
.md-typeset kbd,
.md-typeset pre > code {
  border-radius: 2px;
}
.md-typeset code {
  border: 1px solid var(--ve-rule);
}
.md-typeset pre > code {
  border: 0;
}
.md-typeset kbd {
  font-family: var(--ve-f-mono);
  background: var(--ve-sheet);
  color: var(--ve-ink);
  box-shadow: 0 0 0 1px var(--ve-rule-strong), 0 1px 0 1px var(--ve-rule-strong);
}
.md-typeset table:not([class]) {
  border: 1px solid var(--ve-rule-strong);
  border-radius: 0;
  box-shadow: none;
  background: var(--ve-sheet);
}
.md-typeset table:not([class]) th {
  background: var(--ve-paper);
  border-bottom: 1px solid var(--ve-rule-strong);
}
.md-typeset table:not([class]) td {
  border-top: 1px solid var(--ve-rule);
}
/* a table written with an empty heading row (the home page's) shows none */
.md-typeset table:not([class]) thead:not(:has(th:not(:empty))) {
  display: none;
}
.md-typeset table:not([class]) tbody tr:hover {
  background-color: color-mix(in srgb, var(--ve-accent) 8%, transparent);
  box-shadow: none;
}
.md-typeset img {
  border: 1px solid var(--ve-rule-strong);
}
.md-header img,
.md-nav img {
  border: 0;
}

/* ---------- footer: Previous / Next as the website's cards, then a ruled title block ---------- */
.md-footer {
  background-color: var(--ve-paper);
  color: var(--ve-ink);
}
.md-footer__inner {
  gap: 0;
  padding: 0;
  margin-block: 1.2rem;
  max-width: 61rem;
}
.md-footer__link {
  flex: 1 1 50%;
  padding: 0.6rem 0.2rem 0.8rem;
  border: 1px solid var(--ve-rule-strong);
  opacity: 1;
}
.md-footer__link--prev {
  background: var(--ve-sheet);
  color: var(--ve-ink);
}
.md-footer__link--next {
  background: var(--ve-ink);
  color: var(--ve-paper);
  border-color: var(--ve-ink);
}
.md-footer__link--next .md-footer__direction {
  color: color-mix(in srgb, var(--ve-paper) 70%, transparent);
}
.md-footer__link:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.md-footer__title {
  font-family: var(--ve-f-display);
  font-weight: 700;
  font-variation-settings: "wdth" 108;
}
.md-footer-meta {
  background-color: var(--ve-paper);
  border-top: 1px solid var(--ve-rule-strong);
}
.md-footer-meta,
.md-copyright {
  font-family: var(--ve-f-mono);
  font-size: 0.6rem;
  color: var(--ve-ink-3);
}
.md-footer-meta a,
.md-copyright a {
  color: var(--ve-ink-2);
}

/* ---------- back to top ---------- */
.md-top {
  background-color: var(--ve-sheet);
  color: var(--ve-ink);
  border: 1px solid var(--ve-rule-strong);
  border-radius: 2px;
  box-shadow: none;
}
.md-top:hover {
  background-color: var(--ve-ink);
  color: var(--ve-paper);
}