/* ChirpCloud brand, ported from chirpcloud-open-ui/src/index.css.
   Like the UI: neutral surfaces, purple only for the mark, links and active state. */

/* :root > * (not :root) avoids a Safari bug where custom properties on the
   root element don't recompute when the palette toggle changes them */
:root > * {
  --cc-canvas: #f7f7fb;
  --cc-surface: #ffffff;
  --cc-surface-2: #f3f2f8;
  --cc-line: #e6e5ef;
  --cc-ink: #18162b;
  --cc-ink-2: #47455e;
  --cc-mark: #6652b8; /* brand-600 */
  --cc-accent-text: #5b48ab;

  --md-primary-fg-color: #6652b8;
  --md-primary-fg-color--light: #967ad7;
  --md-primary-fg-color--dark: #54439a;
  --md-accent-fg-color: #7a5fc8;
  --md-accent-fg-color--transparent: #7a5fc81a;
}

[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--cc-canvas);
  --md-default-fg-color: #18162bde;
  --md-code-bg-color: var(--cc-surface-2);
  --md-typeset-a-color: var(--cc-accent-text);
}

[data-md-color-scheme="slate"] {
  --cc-canvas: #0e0d16;
  --cc-surface: #16151f;
  --cc-surface-2: #1e1d2a;
  --cc-line: #2a2839;
  --cc-ink: #eeedf6;
  --cc-ink-2: #b9b7cc;
  --cc-mark: #967ad7; /* brand-400: brand-600 is too dark on this header */
  --cc-accent-text: #b6a0e4;

  --md-hue: 250deg;
  --md-default-bg-color: var(--cc-canvas);
  --md-code-bg-color: var(--cc-surface);
  --md-typeset-a-color: var(--cc-accent-text);
  --md-accent-fg-color: #8f78dc;
}

/* Header and tabs: surface bar with a hairline, like the UI's top bar */
.md-header,
.md-tabs {
  background-color: var(--cc-surface);
  color: var(--cc-ink);
}
.md-header {
  border-bottom: 1px solid var(--cc-line);
  box-shadow: none;
}
.md-tabs {
  border-bottom: 1px solid var(--cc-line);
}
.md-tabs__link {
  opacity: 1;
  color: var(--cc-ink-2);
}
.md-tabs__item--active .md-tabs__link,
.md-tabs__link:hover {
  color: var(--cc-accent-text);
}
.md-header__button.md-logo svg {
  fill: var(--cc-mark);
  height: 1.6rem;
  width: 1.6rem;
}
.md-search__form {
  background-color: var(--cc-surface-2);
}
.md-search__input,
.md-search__input::placeholder,
.md-search__icon {
  color: var(--cc-ink-2);
}

/* Mobile drawer title bar */
.md-nav--primary .md-nav__title[for="__drawer"] {
  background-color: var(--cc-surface);
  color: var(--cc-ink);
}
.md-nav__button.md-logo svg {
  fill: var(--cc-mark);
}

/* Active nav item: colour only, as in devdocs (no padding, so nothing shifts) */
.md-nav--primary .md-nav__link--active {
  color: var(--cc-accent-text);
}

/* Cards */
.md-typeset .grid.cards > ul > li {
  background-color: var(--cc-surface);
  border-color: var(--cc-line);
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
}
.md-typeset .grid.cards .lg {
  color: var(--cc-accent-text);
}


/* Footer legal links */
.cc-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 0.4rem;
}
.cc-legal a {
  color: inherit;
}
.cc-legal a:hover {
  color: var(--md-footer-fg-color);
}