/*
 * The guides' theme: DESIGN.md's Amethyst tokens and type on top of Material
 * for MkDocs. The tokens are the landing page's (site/site.css), which mirror
 * platform/frontend/src/styles/tokens.css; change them there first.
 *
 * Light by default, the warm dark when the OS asks for it, and no toggle.
 * The tokens switch on the media query, as on the landing page, so the page
 * is never painted in the wrong palette while Material's script loads.
 * Material's palette (mkdocs.yml) follows the same preference and puts its
 * `slate` scheme on <body> in the dark, which adds the rest of its dark mode;
 * both schemes take their colours from the tokens below. A manual toggle would
 * break that agreement: these blocks would then have to key on the scheme.
 *
 * Status colours (healthy, warn, error) are not used on these pages at all,
 * and the accent is never a status colour (DESIGN.md).
 */

/* Fonts: the landing page's self-hosted files (site/fonts, SIL OFL), served
   from the root of the same tree. Same faces and ranges as site/site.css. */
@font-face {
  font-family: "Fraunces Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/fraunces-latin-standard-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: "Geist Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-latin-wght-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: "JetBrains Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/fonts/jetbrains-mono-latin-wght-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;
}

/* ---- Tokens: light (default) ---- */
:root {
  color-scheme: light;
  --mp-bg: #efedf4;
  --mp-surface: #f8f6fb;
  --mp-sunken: #e4e0ec;
  --mp-hairline: #dad4e4;
  --mp-ink: #1e1830;
  --mp-muted: #6a6280;
  --mp-accent: #7028c4;
  --mp-accent-strong: #58189e;
  --mp-accent-tint: #ebe1fa;
  --mp-on-accent: #ffffff;

  --mp-font-display: "Fraunces Variable", ui-serif, Georgia, serif;
  /* Material reads these two when theme.font is false. */
  --md-text-font: "Geist Variable";
  --md-code-font: "JetBrains Mono Variable";
}

/* ---- Tokens: dark (warm-cool espresso, follows the OS) ---- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --mp-bg: #16111f;
    --mp-surface: #1e1830;
    --mp-sunken: #100b18;
    --mp-hairline: #322843;
    --mp-ink: #ece7f5;
    --mp-muted: #a99ebe;
    --mp-accent: #9d6bf0;
    --mp-accent-strong: #b48df5;
    --mp-accent-tint: #241634;
    --mp-on-accent: #16111f;
  }
}

/* ---- Material's variables, from the tokens, in both schemes ---- */
:root,
[data-md-color-scheme] {
  /* Only reaches Material values not set below. */
  --md-hue: 262deg;

  /* The header and the mobile drawer's title bar: surface and ink, as the
     console's top bar. Material calls this "primary" and also derives link
     colour from it, so links are set on their own further down. */
  --md-primary-fg-color: var(--mp-surface);
  --md-primary-fg-color--light: var(--mp-surface);
  --md-primary-fg-color--dark: var(--mp-sunken);
  --md-primary-bg-color: var(--mp-ink);
  --md-primary-bg-color--light: var(--mp-muted);

  /* Hover, focus and selection: the accent's hover shade and tint. */
  --md-accent-fg-color: var(--mp-accent-strong);
  --md-accent-fg-color--transparent: var(--mp-accent-tint);
  --md-accent-bg-color: var(--mp-on-accent);
  --md-accent-bg-color--light: var(--mp-on-accent);

  --md-default-fg-color: var(--mp-ink);
  --md-default-fg-color--light: var(--mp-muted);
  --md-default-fg-color--lighter: color-mix(in srgb, var(--mp-muted) 55%, transparent);
  --md-default-fg-color--lightest: var(--mp-hairline);
  --md-default-bg-color: var(--mp-bg);
  --md-default-bg-color--light: color-mix(in srgb, var(--mp-bg) 70%, transparent);
  --md-default-bg-color--lighter: color-mix(in srgb, var(--mp-bg) 30%, transparent);
  --md-default-bg-color--lightest: color-mix(in srgb, var(--mp-bg) 12%, transparent);

  /* Code is set into a sunken well, as logs are in the console. */
  --md-code-fg-color: var(--mp-ink);
  --md-code-bg-color: var(--mp-sunken);
  --md-code-bg-color--light: color-mix(in srgb, var(--mp-sunken) 70%, transparent);
  --md-code-bg-color--lighter: color-mix(in srgb, var(--mp-sunken) 30%, transparent);
  --md-code-hl-color: var(--mp-accent);
  --md-code-hl-color--light: var(--mp-accent-tint);

  --md-typeset-color: var(--mp-ink);
  --md-typeset-a-color: var(--mp-accent);
  --md-typeset-mark-color: var(--mp-accent-tint);
  --md-typeset-table-color: var(--mp-hairline);
  --md-typeset-table-color--light: color-mix(in srgb, var(--mp-sunken) 50%, transparent);

  --md-footer-fg-color: var(--mp-ink);
  --md-footer-fg-color--light: var(--mp-muted);
  --md-footer-fg-color--lighter: var(--mp-muted);
  --md-footer-bg-color: var(--mp-surface);
  --md-footer-bg-color--dark: var(--mp-surface);
}

/* ---- Type: Fraunces for titles, Geist for prose (DESIGN.md) ---- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: var(--mp-font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--mp-ink);
  text-wrap: balance;
}
.md-typeset h1 {
  font-size: 1.875em;
  line-height: 1.15;
}
.md-typeset h2 {
  font-size: 1.375em;
  line-height: 1.25;
}
.md-typeset h3 {
  font-size: 1.125em;
}
.md-header__title {
  font-family: var(--mp-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---- Header: a hairline instead of a shadow, as the console's top bar ---- */
.md-header,
.md-header--shadow {
  box-shadow: 0 1px 0 var(--mp-hairline);
}
/* The landing page's mark (theme/.icons/mesopod/mark.svg), in the header and
   the mobile drawer, drawn from the tokens so it follows the palette. */
.md-logo .mp-mark {
  fill: var(--mp-accent);
}
.md-logo .mp-mark-dot {
  fill: var(--mp-accent-tint);
}
/* Material draws the header's search box translucent over a coloured bar;
   on this light bar it is a surface well with a hairline edge. */
@media screen and (min-width: 60em) {
  .md-search__input {
    background-color: var(--mp-bg);
    box-shadow: inset 0 0 0 1px var(--mp-hairline);
  }
  .md-search__input:hover {
    background-color: var(--mp-sunken);
  }
}

/* ---- Navigation: the active page in the accent, as the console's rail ---- */
.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code {
  font-weight: 500;
}