/*
 * evalr's colours on the Zensical theme. The palette and its rules are in
 * docs/assets/brand/README.md: the overprint is the working colour, the darker ink
 * marks interaction, and the lighter ink highlights code.
 */

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #00704f;
  --md-primary-fg-color--light: #1f8a69;
  --md-primary-fg-color--dark: #00563c;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
  --md-accent-fg-color: #0077b6;
  --md-accent-fg-color--transparent: #0077b61a;
  --md-typeset-a-color: #00704f;
  --md-code-bg-color: #f0f6f2;
  --md-code-hl-color: #ffc400;
  --md-code-hl-color--light: #ffc4002e;
  --md-mermaid-node-bg-color: #00704f12;
  --md-mermaid-node-fg-color: #00704f;
}

[data-md-color-scheme="slate"] {
  --md-hue: 155deg;
  --md-default-bg-color: #0f1b16;
  --md-default-bg-color--light: #0f1b16b3;
  --md-default-bg-color--lighter: #0f1b164d;
  --md-default-bg-color--lightest: #0f1b161f;
  --md-primary-fg-color: #72dcae;
  --md-primary-fg-color--light: #9de8c7;
  --md-primary-fg-color--dark: #4cc793;
  --md-primary-bg-color: #0f1b16;
  --md-primary-bg-color--light: #0f1b16b3;
  --md-accent-fg-color: #38c6f4;
  --md-accent-fg-color--transparent: #38c6f41a;
  --md-typeset-a-color: #72dcae;
  --md-code-bg-color: #16271f;
  --md-code-hl-color: #ffd54a;
  --md-code-hl-color--light: #ffd54a1f;
  --md-mermaid-node-bg-color: #72dcae1f;
  --md-mermaid-node-fg-color: #72dcae;
  --md-footer-bg-color: #0a1410;
  --md-footer-bg-color--dark: #070e0b;
}

/* The header logo: the mark's overprint is ink on paper, and light on screen. */
[data-md-color-scheme="slate"] .md-logo img {
  content: url("../brand/mark-dark.svg");
}

/* Headings in the text face, set a little tighter than body text. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* The home page's title is the lockup; its heading stays for screen readers. */
.md-typeset .evalr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The home page's opening: the lockup and the one-line description. */
.md-typeset .evalr-hero {
  margin: 0.5rem 0 2rem;
}

.md-typeset .evalr-hero img {
  width: min(22rem, 100%);
  height: auto;
}

.md-typeset .evalr-hero p {
  max-width: 34em;
  font-size: 1.15em;
  line-height: 1.55;
}