/* Pourover app palette (internal/web/static/app.css) mapped onto Material's
 * tokens, so the docs read as another page of the app:
 *   espresso #8a5a2b · crema #d99b5e
 *   light: bg #faf8f5, panel #ffffff, panel-2 #f4f0ea, ink #26211c,
 *          ink-soft #635a51, line #e5ded4
 *   dark:  bg #17140f, panel #201c17, panel-2 #2a251e, ink #ece6dd,
 *          ink-soft #a99e91, line #362f26
 */

:root {
  --md-text-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-code-font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

[data-md-color-scheme="default"] {
  --md-default-bg-color: #faf8f5;
  --md-default-fg-color: #26211c;
  --md-default-fg-color--light: #635a51;
  --md-default-fg-color--lighter: #a99e91;
  --md-default-fg-color--lightest: #e5ded4;

  --md-primary-fg-color: #8a5a2b;        /* espresso header */
  --md-primary-fg-color--light: #a0713f;
  --md-primary-fg-color--dark: #6f4820;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #f4f0ea;

  --md-accent-fg-color: #6f4820;
  --md-accent-fg-color--transparent: rgb(138 90 43 / 0.12);

  --md-typeset-a-color: #8a5a2b;
  --md-typeset-color: #26211c;

  --md-code-bg-color: #f4f0ea;
  --md-code-fg-color: #26211c;

  --md-footer-bg-color: #26211c;
  --md-footer-bg-color--dark: #1c1814;
  --md-footer-fg-color: #ece6dd;
  --md-footer-fg-color--light: #a99e91;

  --md-typeset-table-color: #e5ded4;
  --md-shadow-z1: 0 1px 2px rgb(38 33 28 / 0.06), 0 4px 12px rgb(38 33 28 / 0.04);
}

[data-md-color-scheme="slate"] {
  --md-hue: 30; /* keeps Material's derived greys on the warm side */

  --md-default-bg-color: #17140f;
  --md-default-fg-color: #ece6dd;
  --md-default-fg-color--light: #a99e91;
  --md-default-fg-color--lighter: #6b6156;
  --md-default-fg-color--lightest: #362f26;

  --md-primary-fg-color: #201c17;        /* dark panel header, crema accents */
  --md-primary-fg-color--light: #2a251e;
  --md-primary-fg-color--dark: #17140f;
  --md-primary-bg-color: #ece6dd;
  --md-primary-bg-color--light: #a99e91;

  --md-accent-fg-color: #e6b078;
  --md-accent-fg-color--transparent: rgb(217 155 94 / 0.14);

  --md-typeset-a-color: #d99b5e;
  --md-typeset-color: #ece6dd;

  --md-code-bg-color: #2a251e;
  --md-code-fg-color: #ece6dd;

  --md-footer-bg-color: #201c17;
  --md-footer-bg-color--dark: #131009;
  --md-footer-fg-color: #ece6dd;
  --md-footer-fg-color--light: #a99e91;

  --md-typeset-table-color: #362f26;
}

/* Match the app's slightly rounded, hairline-bordered panels. */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 10px;
  box-shadow: var(--md-shadow-z1);
}

.md-typeset code {
  border-radius: 6px;
}

/* Status pills, written as `Active`{ .pill } etc. — colours mirror app.css
 * (--ok, --warn, --danger and the accent/ink-soft washes). */
.md-typeset .pill {
  display: inline-block;
  padding: 0.05rem 0.55em;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgb(138 90 43 / 0.12);
  color: var(--md-typeset-a-color);
}
.md-typeset .pill-ok      { background: rgb(47 107 70 / 0.14);  color: #2f6b46; }
.md-typeset .pill-warn    { background: rgb(122 95 48 / 0.16);  color: #7a5f30; }
.md-typeset .pill-danger  { background: rgb(160 51 37 / 0.12);  color: #a03325; }
.md-typeset .pill-muted   { background: rgb(99 90 81 / 0.14);   color: var(--md-default-fg-color--light); }
[data-md-color-scheme="slate"] .md-typeset .pill-ok     { color: #6fbf8e; }
[data-md-color-scheme="slate"] .md-typeset .pill-warn   { color: #d9b168; }
[data-md-color-scheme="slate"] .md-typeset .pill-danger { color: #e08677; }