/*
 * The palette is generated from tools/build-palette.php, the playground's too.
 * Edit the tool and run `make palette`; PaletteTest fails on drift and on any
 * pair dropping under its documented ratio.
 */
:root {
  /* >>> generated palette — run `make palette`, do not edit by hand */
  --pitch-black:   #231c07;         /* the ink, and the dark field */
  --bone:          #ece2d0;         /* the light field, and the light ink — never #fff */
  --lobster-pink:  #c46d5e;         /* the hue the other two are drawn from; carries no text itself */
  --lobster-deep:  #9c4536;         /* light mode: 4.93:1 on bone, both as the header and as a link */
  --lobster-light: #cd8777;         /* dark mode: 4.99:1 on the raised pane, the tighter dark surface */
  --dark-blue:     #272a35;         /* the raised pane, dark mode — the playground and the docs code blocks */
  /* <<< generated palette */
}

:root  > * {
  --md-default-bg-color: var(--bone);
  --md-primary-fg-color: var(--lobster-deep);
  --md-primary-fg-color--light: var(--bone);
  --md-primary-fg-color--dark: var(--pitch-black);
  --md-footer-bg-color: var(--pitch-black);
  --md-accent-fg-color: var(--lobster-deep);
  --md-footer-bg-color--dark: var(--pitch-black);
  --md-footer-fg-color--light: var(--bone);
  --md-footer-fg-color--lighter: var(--bone);

  /* Bone, never #fff — Material defaults all three to white or an alpha of it.
     --light is the search placeholder, at full strength on purpose: every alpha
     Material would dim it by falls short of 4.5:1. */
  --md-primary-bg-color: var(--bone);
  --md-primary-bg-color--light: var(--bone);
  --md-footer-fg-color: var(--bone);

  /* Material derives this from --md-primary-fg-color. Pinned even though the
     values match: a header is chrome behind bone, a link is text on it, so one
     moving must not drag the other. */
  --md-typeset-a-color: var(--lobster-deep);

  /* Material's ink is a neutral #000000de and its code blocks a neutral
     #f5f5f5 — both wrong beside the playground's warm ink. Only the two visible
     tokens are named; --lighter and --lightest stay alphas, since they tint
     hairlines and disabled states rather than paint text. */
  --md-default-fg-color: var(--pitch-black);
  --md-default-fg-color--light: #675f4b;
  --md-code-fg-color: var(--pitch-black);
  --md-code-bg-color: #f6f2ea;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--pitch-black);
  --md-footer-bg-color: var(--bone);
  --md-footer-fg-color: var(--pitch-black);
  --md-footer-bg-color--dark: var(--bone);
  --md-footer-fg-color--light: var(--pitch-black);
  --md-footer-fg-color--lighter: var(--pitch-black);

  /* The deep lobster is 2.67:1 on pitch black; the lifted one 5.91:1, and it is
     what the playground uses on its dark pane. */
  --md-typeset-a-color: var(--lobster-light);
  --md-accent-fg-color: var(--lobster-light);

  --md-default-fg-color: var(--bone);
  --md-default-fg-color--light: #b0a794;
  --md-code-fg-color: var(--bone);
  --md-code-bg-color: var(--dark-blue);
}


.announce-playground {
  display: block;
  text-align: center;
}

/*
 * Material wraps the announce block in md-typeset, so .md-typeset a beats its own
 * `a { color: inherit }` and would paint this link the body link colour — 2.67:1
 * on the strip. Inheriting the banner's foreground needs no value of its own and
 * gives 13.2:1 in both schemes. Hover must be told the same or it restores the
 * accent, so it underlines instead.
 */
.md-typeset .announce-playground,
.md-typeset .announce-playground:focus,
.md-typeset .announce-playground:hover {
  color: inherit;
}

.announce-playground:hover strong {
  text-decoration: underline;
}