/*
 * tingle — red carries structure (header, nav, rules), blue carries anything
 * the reader can act on (links, hover, focus), yellow only ever appears as a
 * surface behind dark text, since it fails contrast as a foreground.
 *
 * Every pairing below clears WCAG AA against the surface it sits on, because
 * a palette nobody can read is just a mood. Measured, not asserted: the
 * tightest pairing is the light special-token pink on the code surface at
 * 4.53:1, then the dark page title red on the dark page at 4.62:1.
 *
 * Material's `default` and `slate` schemes carry the surfaces; every colour
 * below comes from here, and mkdocs.yml pins `primary`/`accent` to `custom`
 * so no Material palette rule outranks these.
 */

:root {
  --tingle-paper: #ffffff;
  --tingle-ink: #000000de;
  --tingle-red: #c62828;
  --tingle-red-light: #ef5350;
  --tingle-red-dark: #8c1d1d;
  --tingle-blue: #1565c0;
  --tingle-yellow: #f9a825;
  --tingle-yellow-surface: #fff8e1;
}

/*
 * One block per scheme: its surfaces, its mapping onto Material's variables,
 * and its code-highlight colours. Material ships a sensible default for that
 * last group; what it does not do is agree with a palette it has never heard
 * of, and a code block is most of what these pages are — so keywords take the
 * structural red, functions the interaction blue, the rest stays as Material
 * had it.
 */

/* ---- Light ---- */

[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--tingle-paper);
  --md-default-fg-color: var(--tingle-ink);

  --md-primary-fg-color: var(--tingle-red);
  --md-primary-fg-color--light: var(--tingle-red-light);
  --md-primary-fg-color--dark: var(--tingle-red-dark);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;

  --md-accent-fg-color: var(--tingle-blue);
  --md-accent-fg-color--transparent: #1565c01a;
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: #ffffffb3;

  --md-typeset-a-color: var(--tingle-blue);
  --md-typeset-mark-color: #f9a82566;

  --md-footer-bg-color: var(--tingle-red-dark);
  --md-footer-bg-color--dark: #6d1616;

  --md-code-hl-color: #4287ff;
  --md-code-hl-color--light: #4287ff1a;
  --md-code-hl-keyword-color: var(--tingle-red);
  --md-code-hl-function-color: var(--tingle-blue);
  --md-code-hl-string-color: #1c7d4d;
  --md-code-hl-number-color: #d52a2a;
  --md-code-hl-comment-color: #6b6b6b;
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-operator-color: var(--md-default-fg-color--light);
  --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
  --md-code-hl-constant-color: #6e59d9;
  --md-code-hl-special-color: #db1457;
}

/* ---- Dark ---- */

[data-md-color-scheme="slate"] {
  --tingle-red: #ef5350;
  --tingle-red-light: #ff8a80;
  --tingle-red-dark: #a51f1f;
  --tingle-red-darker: #7f1616;
  --tingle-blue: #64b5f6;
  --tingle-yellow: #ffca28;
  --tingle-yellow-surface: #ffca2824;

  --md-primary-fg-color: var(--tingle-red-dark);
  --md-primary-fg-color--light: var(--tingle-red);
  --md-primary-fg-color--dark: var(--tingle-red-darker);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;

  --md-accent-fg-color: var(--tingle-blue);
  --md-accent-fg-color--transparent: #64b5f624;

  --md-typeset-a-color: var(--tingle-blue);
  --md-typeset-mark-color: #ffca2859;

  --md-footer-bg-color: #16181d;
  --md-footer-bg-color--dark: #101216;

  --md-code-hl-color: #2977ff;
  --md-code-hl-color--light: #2977ff1a;
  --md-code-hl-keyword-color: #ff7b72;
  --md-code-hl-function-color: var(--tingle-blue);
  --md-code-hl-string-color: #2fb170;
  --md-code-hl-number-color: #f0826f;
  --md-code-hl-comment-color: #9a9fab;
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-operator-color: var(--md-default-fg-color--light);
  --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
  --md-code-hl-constant-color: #9383e2;
  --md-code-hl-special-color: #f06090;
  --md-code-hl-generic-color: var(--md-default-fg-color--light);
  --md-code-hl-variable-color: var(--md-default-fg-color--light);
}

/* Structure — red: the page title, and where the reader is in the nav. */

.md-typeset h1 {
  color: var(--tingle-red);
  font-weight: 700;
}

.md-typeset h2 {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  padding-bottom: 0.2em;
}

.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--tingle-red);
}

/* Interaction — blue: anything under the pointer. */

.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--md-accent-fg-color);
}

.md-typeset .headerlink:hover,
.md-typeset :target > .headerlink {
  color: var(--md-accent-fg-color);
}

.md-search-result__link:focus,
.md-search-result__link:hover {
  background-color: var(--md-accent-fg-color--transparent);
}

/* Highlight — yellow, always as a surface under dark text. */

.md-typeset mark,
.md-search-result__link mark {
  background-color: var(--md-typeset-mark-color);
  color: inherit;
  box-shadow: none;
}

.md-typeset .highlight .hll,
.md-typeset .highlighttable .hll {
  background-color: var(--tingle-yellow-surface);
}

.md-typeset blockquote {
  border-left: 0.2rem solid var(--tingle-yellow);
  color: var(--md-default-fg-color--light);
}

.md-typeset kbd {
  box-shadow:
    0 0.1rem 0 0.05rem var(--tingle-yellow),
    0 0.1rem 0 var(--md-default-fg-color--lighter),
    0 -0.1rem 0.2rem var(--md-default-fg-color--lightest) inset;
}

/* Admonitions — the three colours split by intent, everything else default. */

.md-typeset .admonition.danger,
.md-typeset details.danger,
.md-typeset .admonition.failure,
.md-typeset details.failure {
  border-color: var(--tingle-red);
}

.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary,
.md-typeset .failure > .admonition-title,
.md-typeset .failure > summary {
  background-color: #c628281a;
}

.md-typeset .danger > .admonition-title::before,
.md-typeset .danger > summary::before,
.md-typeset .failure > .admonition-title::before,
.md-typeset .failure > summary::before {
  background-color: var(--tingle-red);
}

.md-typeset .admonition.note,
.md-typeset details.note,
.md-typeset .admonition.info,
.md-typeset details.info {
  border-color: var(--tingle-blue);
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary,
.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
  background-color: var(--md-accent-fg-color--transparent);
}

.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before,
.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before {
  background-color: var(--tingle-blue);
}

.md-typeset .admonition.warning,
.md-typeset details.warning,
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--tingle-yellow);
}

.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary,
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: var(--tingle-yellow-surface);
}

.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before,
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: var(--tingle-yellow);
}

/* Tables — a red rule under the head, blue on row hover. */

.md-typeset table:not([class]) th {
  background-color: var(--md-default-fg-color--lightest);
  border-bottom: 2px solid var(--tingle-red);
}

.md-typeset table:not([class]) tr:hover {
  background-color: var(--md-accent-fg-color--transparent);
}