/* The mascot's palette, the same tokens the landing (cloud/site) and the
   platform's own shell use: ink for the ground, sand for text, teal for
   what is interactive, slate for what is secondary. Material's own
   variables are overridden, not replaced, so a theme update costs nothing. */
:root {
  --ak-ink: #1c1b22;
  --ak-ink-sunken: #141319;
  --ak-ink-raised: #26252e;
  --ak-sand: #e6cdb7;
  --ak-sand-strong: #f4e6d8;
  --ak-teal: #56c4b6;
  --ak-teal-link: #7fd8cc;
  --ak-slate: #8ea4bd;
  --ak-line: #35343f;
}

/* Both schemes share the accent; only the ground differs. */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--ak-ink);
  --md-primary-fg-color--light: var(--ak-ink-raised);
  --md-primary-fg-color--dark: var(--ak-ink-sunken);
  --md-primary-bg-color: var(--ak-sand-strong);
  --md-accent-fg-color: #2a9d8f;
  --md-accent-fg-color--transparent: rgba(42, 157, 143, 0.1);
  --md-typeset-a-color: #1f8a7d;
  --md-footer-bg-color: var(--ak-ink);
  --md-footer-bg-color--dark: var(--ak-ink-sunken);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--ak-ink);
  --md-default-bg-color--light: var(--ak-ink-raised);
  --md-default-bg-color--lighter: #2e2d37;
  --md-default-bg-color--lightest: #363540;
  --md-default-fg-color: var(--ak-sand);
  --md-default-fg-color--light: rgba(230, 205, 183, 0.72);
  --md-default-fg-color--lighter: rgba(230, 205, 183, 0.4);
  --md-default-fg-color--lightest: rgba(230, 205, 183, 0.12);
  --md-primary-fg-color: var(--ak-ink-sunken);
  --md-primary-fg-color--light: var(--ak-ink-raised);
  --md-primary-fg-color--dark: var(--ak-ink-sunken);
  --md-primary-bg-color: var(--ak-sand-strong);
  --md-accent-fg-color: var(--ak-teal);
  --md-accent-fg-color--transparent: rgba(86, 196, 182, 0.12);
  --md-typeset-a-color: var(--ak-teal-link);
  --md-typeset-color: var(--ak-sand);
  --md-code-bg-color: var(--ak-ink-sunken);
  --md-code-fg-color: var(--ak-sand-strong);
  --md-footer-bg-color: var(--ak-ink-sunken);
  --md-footer-bg-color--dark: #0f0e13;
  --md-typeset-table-color: var(--ak-line);
  --md-admonition-bg-color: var(--ak-ink-raised);
}

/* Two marks, the two the product has. The header carries the round logo
   next to the name, the way the platform's own shell does. */
.md-header__button.md-logo img {
  border-radius: 50%;
}

/* And the sign itself — the gear with the helmet's ears — stands over the
   navigation, above the name, large enough to be a sign rather than a
   bullet. It is drawn in dark ink on transparent, which is right on the
   light sidebar and invisible on the dark one, so on the dark scheme it
   is inverted: the ink is near-black, and its inverse is the sand this
   whole theme is written in. */
@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    height: auto;
    line-height: 1.3;
    padding: 0.4rem 0.6rem 1rem;
    white-space: normal;
  }

  .md-nav--primary > .md-nav__title::before {
    content: "";
    display: block;
    width: 6.4rem;
    height: 6.4rem;
    background: url("../assets/gear.png") left center / contain no-repeat;
  }

  [data-md-color-scheme="slate"] .md-nav--primary > .md-nav__title::before {
    filter: invert(1);
  }
}

/* Headings in sand-strong, so the hierarchy reads against the ink. */
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3 {
  color: var(--ak-sand-strong);
}

/* Secondary text -- the navigation, the table of contents -- in slate. */
[data-md-color-scheme="slate"] .md-nav__link:not(.md-nav__link--active),
[data-md-color-scheme="slate"] .md-nav__title {
  color: var(--ak-slate);
}
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: var(--ak-teal-link);
}

[data-md-color-scheme="slate"] .md-search__form {
  background-color: var(--ak-ink-raised);
}