/*
 * Agent Library docs — Arcade brand overrides.
 *
 * Brand palette pulled directly from arcade.dev:
 *   - background:   #0f0f0f  (near-black, primary)
 *   - surface:      #1a1a2e  (dark navy, raised)
 *   - accent:       #00e0e0  (signature cyan)
 *   - foreground:   #ffffff
 */

:root {
  --arcade-cyan: #00e0e0;
  --arcade-cyan-dim: #00b0b0;
  --arcade-bg: #0f0f0f;
  --arcade-surface: #1a1a2e;
  --arcade-surface-2: #232342;
  --arcade-fg: #ffffff;
  --arcade-fg-muted: #c8c8d4;
}

/* Dark scheme — primary brand experience. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--arcade-bg);
  --md-default-bg-color--light: var(--arcade-surface);
  --md-default-fg-color: var(--arcade-fg);
  --md-default-fg-color--light: var(--arcade-fg-muted);
  --md-default-fg-color--lighter: rgba(255, 255, 255, 0.6);
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.07);

  --md-primary-fg-color: var(--arcade-bg);
  --md-primary-fg-color--light: var(--arcade-surface);
  --md-primary-fg-color--dark: #050505;
  --md-primary-bg-color: var(--arcade-fg);
  --md-primary-bg-color--light: var(--arcade-fg-muted);

  --md-accent-fg-color: var(--arcade-cyan);
  --md-accent-fg-color--transparent: rgba(0, 224, 224, 0.12);
  --md-accent-bg-color: var(--arcade-bg);

  --md-code-bg-color: var(--arcade-surface);
  --md-code-fg-color: var(--arcade-fg);
  --md-code-hl-color: rgba(0, 224, 224, 0.18);
  --md-code-hl-keyword-color: var(--arcade-cyan);
  --md-code-hl-string-color: #c4ff8a;

  --md-typeset-a-color: var(--arcade-cyan);

  --md-footer-bg-color: var(--arcade-bg);
  --md-footer-bg-color--dark: #050505;
}

/* Light scheme — keep the cyan accent, white background, near-black text. */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--arcade-bg);
  --md-primary-fg-color--light: var(--arcade-surface);
  --md-primary-fg-color--dark: #050505;
  --md-primary-bg-color: var(--arcade-fg);

  --md-accent-fg-color: var(--arcade-cyan-dim);
  --md-accent-fg-color--transparent: rgba(0, 176, 176, 0.12);

  --md-typeset-a-color: var(--arcade-cyan-dim);

  --md-footer-bg-color: var(--arcade-bg);
  --md-footer-bg-color--dark: #050505;
}

/* Header tweaks: slightly darker than page background, hairline accent border. */
.md-header {
  background-color: var(--arcade-bg);
  border-bottom: 1px solid rgba(0, 224, 224, 0.18);
}

/* Logo: enforce a fixed height so the SVG wordmark doesn't dominate. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.5rem;
  width: auto;
}

/* Brighter cyan on hover for nav links + table-of-contents items. */
[data-md-color-scheme="slate"] .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav__link.md-nav__link--active {
  color: var(--arcade-cyan);
}

/* Code: navy surface tone, body color text. Earlier draft tinted inline
 * `code` cyan, which made every backticked term in prose loud and wore
 * down the eye fast. Cyan stays reserved for links and accents. */
[data-md-color-scheme="slate"] .md-typeset code {
  background-color: var(--arcade-surface-2);
  color: var(--arcade-fg);
  border-radius: 3px;
}
[data-md-color-scheme="slate"] .md-typeset pre > code {
  background-color: var(--arcade-surface);
  color: var(--arcade-fg);
}

/* Admonitions: tint the title bar with cyan for note/tip; keep warning/danger. */
[data-md-color-scheme="slate"] .md-typeset .admonition.note,
[data-md-color-scheme="slate"] .md-typeset .admonition.tip,
[data-md-color-scheme="slate"] .md-typeset .admonition.info {
  border-color: var(--arcade-cyan);
}
[data-md-color-scheme="slate"] .md-typeset .admonition.note > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .admonition.tip > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .admonition.info > .admonition-title {
  background-color: rgba(0, 224, 224, 0.15);
}

/* Buttons: cyan accent, dark text. */
[data-md-color-scheme="slate"] .md-button--primary {
  background-color: var(--arcade-cyan);
  border-color: var(--arcade-cyan);
  color: var(--arcade-bg);
}
[data-md-color-scheme="slate"] .md-button--primary:hover {
  background-color: var(--arcade-fg);
  border-color: var(--arcade-fg);
  color: var(--arcade-bg);
}

/* Search bar: cyan focus ring. */
[data-md-color-scheme="slate"] .md-search__input {
  background-color: var(--arcade-surface);
  color: var(--arcade-fg);
}
[data-md-color-scheme="slate"] .md-search__input:focus {
  background-color: var(--arcade-surface-2);
  box-shadow: 0 0 0 2px rgba(0, 224, 224, 0.4);
}