/* Design "Gate" (ADR-0035) for the documentation: fonts and colors of the
   landing page (ansible/roles/reverse_proxy/files/web/brand/brand.css),
   self-hosted. */

@font-face {
  font-family: "Exo 2";
  font-weight: 600 700;
  font-display: swap;
  src: url("fonts/exo2-latin-wght.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin-wght.woff2") format("woff2");
}

:root {
  --md-text-font-family: "Inter", system-ui, sans-serif;
  --md-code-font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --md-primary-fg-color: #3443b8;
  --md-primary-fg-color--light: #4a5bd0;
  --md-primary-fg-color--dark: #26318a;
  --md-accent-fg-color: #ffb000;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #05040f;
  --md-default-fg-color: #f4f4ff;
  --md-default-fg-color--light: #c4c6e4;
  --md-default-fg-color--lighter: #a7a9cf;
  --md-primary-fg-color: #0f1028;
  --md-primary-bg-color: #f4f4ff;
  --md-typeset-color: #c4c6e4;
  --md-typeset-a-color: #a9cfff;
  --md-accent-fg-color: #ffb000;
  --md-code-bg-color: #0f1028;
  --md-footer-bg-color: #07061a;
  --md-footer-bg-color--dark: #05040f;
}

/* Sparse dots on the dark background, like the landing page */
[data-md-color-scheme="slate"] body {
  background:
    radial-gradient(circle, rgba(143, 138, 224, 0.5) 0.8px, transparent 1.2px) 31px 47px / 173px 157px,
    radial-gradient(circle, rgba(201, 198, 255, 0.65) 0.9px, transparent 1.4px) 113px 9px / 241px 229px,
    #05040f;
}

[data-md-color-scheme="slate"] .md-main,
[data-md-color-scheme="slate"] .md-container {
  background: transparent;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-header__title {
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2 {
  color: #f4f4ff;
}