/* Kitly docs brand: dark pro-tool ground with a single bright yellow accent.
   Accent: #f5c217. On filled elements it always pairs with near-black text. */

:root {
  --kitly-yellow: #f5c217;
  --kitly-yellow-soft: #ffd84d;
  --kitly-ink: #1a1a1a;
  --kitly-header: #17181b;
}

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

[data-md-color-scheme="default"] {
  /* Header and primary surfaces stay dark; yellow is the accent, never the fill
     behind body text. */
  --md-primary-fg-color: #17181b;
  --md-primary-fg-color--light: #2a2b30;
  --md-primary-fg-color--dark: #0e0f11;
  --md-primary-bg-color: #f4f4f2;
  --md-primary-bg-color--light: #c9c9c6;

  /* Interactive accent. A darkened gold keeps contrast on white. */
  --md-accent-fg-color: #9a7500;
  --md-accent-fg-color--transparent: rgba(245, 194, 23, 0.12);
  --md-accent-bg-color: var(--kitly-ink);
  --md-accent-bg-color--light: rgba(26, 26, 26, 0.7);

  --md-typeset-a-color: #8a6900;
}

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

[data-md-color-scheme="slate"] {
  --md-hue: 228;

  --md-primary-fg-color: #17181b;
  --md-primary-fg-color--light: #2a2b30;
  --md-primary-fg-color--dark: #0e0f11;
  --md-primary-bg-color: #f4f4f2;
  --md-primary-bg-color--light: #c9c9c6;

  /* The full-strength yellow reads well on the dark ground. */
  --md-accent-fg-color: var(--kitly-yellow);
  --md-accent-fg-color--transparent: rgba(245, 194, 23, 0.12);
  --md-accent-bg-color: var(--kitly-ink);
  --md-accent-bg-color--light: rgba(26, 26, 26, 0.7);

  --md-typeset-a-color: var(--kitly-yellow);
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: var(--kitly-yellow-soft);
}

/* ---------- Header ---------- */

.md-header,
.md-tabs {
  background-color: var(--kitly-header);
  color: #f4f4f2;
}

.md-header {
  border-bottom: 2px solid var(--kitly-yellow);
}

/* Active top-level tab gets the yellow underline. */
.md-tabs__link--active {
  color: var(--kitly-yellow);
  font-weight: 700;
}

.md-tabs__link:hover {
  color: var(--kitly-yellow-soft);
}

/* ---------- Navigation and TOC ---------- */

.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--md-accent-fg-color);
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active {
  color: var(--kitly-yellow);
}

/* ---------- Search ---------- */

.md-search-result mark {
  color: inherit;
  background-color: rgba(245, 194, 23, 0.35);
}

[data-md-color-scheme="default"] .md-typeset mark {
  background-color: rgba(245, 194, 23, 0.4);
  color: var(--kitly-ink);
}

[data-md-color-scheme="slate"] .md-typeset mark {
  background-color: rgba(245, 194, 23, 0.25);
  color: inherit;
}

/* ---------- Filled controls: yellow with near-black text ---------- */

.md-typeset .md-button--primary {
  background-color: var(--kitly-yellow);
  border-color: var(--kitly-yellow);
  color: var(--kitly-ink);
}

.md-typeset .md-button--primary:hover {
  background-color: var(--kitly-yellow-soft);
  border-color: var(--kitly-yellow-soft);
  color: var(--kitly-ink);
}

/* ---------- Keycaps ---------- */

.md-typeset kbd {
  border-radius: 4px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

/* ---------- Footer ---------- */

.md-footer {
  background-color: var(--kitly-header);
}

.md-footer-meta {
  background-color: #0e0f11;
}