/* Reach Dog brand theme for MkDocs Material.
   Token values are taken verbatim from source-of-truth/BRAND_GUIDELINES.md
   (sections 1 and 2) and from the live marketing stylesheet at
   C:\reachdog-marketing\src\styles\global.css. Do not invent a value here.
   If a brand token changes, it changes in BRAND_GUIDELINES.md first. */

:root {
  /* Brand palette */
  --rd-green: #0b7e38;
  --rd-green-bright: #0ac252;
  --rd-green-dark: #095f2a;

  /* Light surfaces */
  --rd-bg: #ffffff;
  --rd-bg-nav: #f7f8f9;
  --rd-surface-alt: #f0f5fa;
  --rd-text: #202124;
  --rd-text-muted: #6b7380;
  --rd-border: #d2e1ed;
}

/* ---------------------------------------------------------------------------
   Light scheme
   --------------------------------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--rd-green);
  --md-primary-fg-color--light: var(--rd-green-bright);
  --md-primary-fg-color--dark: var(--rd-green-dark);
  --md-accent-fg-color: var(--rd-green-bright);

  --md-default-bg-color: var(--rd-bg);
  --md-default-fg-color: var(--rd-text);
  --md-default-fg-color--light: var(--rd-text-muted);

  --md-typeset-a-color: var(--rd-green);
  --md-code-bg-color: var(--rd-surface-alt);
  --md-footer-bg-color: var(--rd-bg-nav);
  --md-footer-fg-color: var(--rd-text);

  --rd-header-bg: var(--rd-bg-nav);
  --rd-header-fg: var(--rd-text);
  --rd-rule: var(--rd-border);
  --rd-table-head: var(--rd-surface-alt);
}

/* ---------------------------------------------------------------------------
   Dark scheme. Values from BRAND_GUIDELINES section 2.1 (app.reach.dog theme).
   --------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--rd-green);
  --md-primary-fg-color--light: var(--rd-green-bright);
  --md-primary-fg-color--dark: var(--rd-green-dark);
  --md-accent-fg-color: var(--rd-green-bright);

  --md-default-bg-color: #1e1f24;
  --md-default-fg-color: #f0f5fa;
  --md-default-fg-color--light: #9ca3af;
  --md-default-fg-color--lighter: #9ca3af;

  --md-typeset-color: #f0f5fa;
  --md-typeset-a-color: var(--rd-green-bright);
  --md-code-bg-color: #16171b;
  --md-code-fg-color: #f0f5fa;
  --md-footer-bg-color: #16171b;
  --md-footer-fg-color: #f0f5fa;

  --rd-header-bg: #16171b;
  --rd-header-fg: #f0f5fa;
  --rd-rule: #373a45;
  --rd-table-head: #222329;
}

/* ---------------------------------------------------------------------------
   Chrome. The header mirrors the reach.dog nav bar: neutral surface, brand
   green reserved for the wordmark accent and interactive elements, rather
   than Material's default solid-primary header.
   --------------------------------------------------------------------------- */
.md-header,
.md-tabs {
  background-color: var(--rd-header-bg);
  color: var(--rd-header-fg);
  box-shadow: none;
  border-bottom: 1px solid var(--rd-rule);
}

.md-header__title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* The wordmark accent: the ".dog" half of the logotype is the bright brand
   green everywhere else on the platform, so the docs title carries it too. */
.md-header__topic .md-ellipsis {
  color: var(--rd-header-fg);
}

.md-tabs__link {
  color: var(--rd-header-fg);
  opacity: 0.72;
  font-weight: 500;
}

.md-tabs__link:hover,
.md-tabs__link--active {
  color: var(--rd-header-fg);
  opacity: 1;
}

.md-tabs__item--active .md-tabs__link {
  border-bottom: 2px solid var(--md-primary-fg-color);
}

.md-search__form {
  background-color: rgba(127, 127, 127, 0.12);
}

.md-search__form:hover {
  background-color: rgba(127, 127, 127, 0.2);
}

/* ---------------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--md-default-fg-color);
}

.md-typeset h1 {
  font-weight: 700;
  font-size: 2rem;
}

.md-typeset h2 {
  margin-top: 2.2em;
  padding-top: 0.6em;
  border-top: 1px solid var(--rd-rule);
}

.md-typeset {
  font-size: 0.78rem;
  line-height: 1.65;
}

/* ---------------------------------------------------------------------------
   Tables. Used heavily for skill and field references.
   --------------------------------------------------------------------------- */
.md-typeset table:not([class]) {
  border: 1px solid var(--rd-rule);
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.72rem;
}

.md-typeset table:not([class]) th {
  background-color: var(--rd-table-head);
  color: var(--md-default-fg-color);
  font-weight: 600;
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--rd-rule);
}

/* ---------------------------------------------------------------------------
   Admonitions, tuned to the brand green rather than Material's blue.
   --------------------------------------------------------------------------- */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--rd-green);
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(11, 126, 56, 0.1);
}

.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: var(--rd-green);
}

/* ---------------------------------------------------------------------------
   Buttons and links
   --------------------------------------------------------------------------- */
.md-typeset .md-button {
  border-radius: 8px;
  font-weight: 500;
}

.md-typeset .md-button--primary {
  background-color: var(--rd-green);
  border-color: var(--rd-green);
  color: #ffffff;
}

.md-typeset .md-button--primary:hover {
  background-color: var(--rd-green-bright);
  border-color: var(--rd-green-bright);
  color: #ffffff;
}

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

[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link {
  color: var(--rd-green-bright);
}