/*
 * PinkTower brand on Material for MkDocs. Colours are the web app's tokens
 * (frontend/src/index.css @theme): the lavender theme colour #A794F2 with white
 * text on it, as on the app's primary button, ink text, cream canvas. Fonts
 * match the app: Nunito for text, Fredoka for headings.
 *
 * Links are the darker lavender-600, not the theme colour: #A794F2 text on
 * cream is about 2.5:1, below the 4.5:1 body text needs.
 */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400..700&display=swap");

:root,
[data-md-color-scheme="default"] {
  --pt-lavender-300: #c1b4ff;
  --pt-lavender-400: #a794f2;
  --pt-lavender-500: #8e78e0;
  --pt-lavender-600: #7459c8;
  --pt-lavender-900: #2e1f66;
  --pt-ink-900: #2b1e4a;
  --pt-cream-50: #fffdf5;
  --pt-cream-100: #fff8ec;

  --md-primary-fg-color: var(--pt-lavender-400);
  --md-primary-fg-color--light: var(--pt-lavender-300);
  --md-primary-fg-color--dark: var(--pt-lavender-600);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.8);
  --md-accent-fg-color: var(--pt-lavender-500);
  --md-accent-fg-color--transparent: rgba(142, 120, 224, 0.1);

  --md-default-bg-color: var(--pt-cream-50);
  --md-default-fg-color: var(--pt-ink-900);
  --md-typeset-color: var(--pt-ink-900);
  --md-typeset-a-color: var(--pt-lavender-600);
  --md-code-bg-color: var(--pt-cream-100);
}

/* The footer in the theme colour too, in both modes: the previous/next band
   matches the header, the copyright strip below it is the darker lavender.
   Material's footer greys are faint white, which washes out on lavender. */
:root,
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-footer-bg-color: #a794f2;
  --md-footer-bg-color--dark: #7459c8;
  --md-footer-fg-color: #ffffff;
  --md-footer-fg-color--light: rgba(255, 255, 255, 0.9);
  --md-footer-fg-color--lighter: rgba(255, 255, 255, 0.8);
}

[data-md-color-scheme="slate"] {
  --md-hue: 260;
  /* The same brand bar in both modes. */
  --md-primary-fg-color: #a794f2;
  --md-primary-fg-color--light: #c1b4ff;
  --md-primary-fg-color--dark: #7459c8;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.8);
  --md-accent-fg-color: #c1b4ff;
  --md-accent-fg-color--transparent: rgba(193, 180, 255, 0.1);
  --md-typeset-a-color: #c4b6ff;
  --md-default-bg-color: #1b1430;
}

/* Headings and the site title in the app's display face. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-header__topic {
  font-family: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0;
}
.md-typeset h1 {
  color: var(--md-default-fg-color);
}

/* The sidebar repeats the site name the header already shows. Kept in the
   phone drawer, where it is the drawer's own header. */
@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__title {
    display: none;
  }
}

/* Pill buttons and rounded cards, as in the app. */
.md-typeset .md-button {
  border-radius: 999px;
}
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border-radius: 24px;
}
.md-typeset .admonition,
.md-typeset details {
  border-radius: 16px;
}

/* "Who can do this" line at the top of every task page. */
.md-typeset .who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: -0.4rem 0 1.2rem;
  font-size: 0.75rem;
}
.md-typeset .who > strong {
  margin-right: 0.2rem;
}
.md-typeset .role {
  display: inline-block;
  padding: 0.1rem 0.65rem;
  border-radius: 999px;
  background: rgba(167, 148, 242, 0.18);
  color: var(--pt-lavender-900, #2e1f66);
  font-weight: 700;
  white-space: nowrap;
}
[data-md-color-scheme="slate"] .md-typeset .role {
  background: rgba(167, 148, 242, 0.25);
  color: #e4ddff;
}

/* Screenshots: a soft frame so white app surfaces do not melt into the page. */
.md-typeset img.screenshot,
.md-typeset .glightbox img {
  border-radius: 16px;
  border: 1px solid rgba(43, 30, 74, 0.12);
  box-shadow: 0 4px 18px rgba(43, 30, 74, 0.08);
}
.md-typeset img.phone {
  max-width: 320px;
}