/* ============================================================
   Brand palette for the docs site.

   REPLACE the three --brand-* base colors below with your product's
   LOGO colors (see DOC-REPO-GUIDE.md §7 "Derive the palette from the logo").
   Everything else derives from them via color-mix() — you normally only
   touch these three lines.
   ============================================================ */

:root {
  /* --- REPLACE THESE THREE (from your logo) --- */
  --brand-primary:   #1E73BE; /* header, nav, primary */
  --brand-accent:    #00A859; /* links hover, interactive highlights */
  --brand-highlight: #F39200; /* marks, notes, badges */

  /* neutrals — usually fine as-is (paper background + ink text) */
  --brand-ink:   #211d18;
  --brand-paper: #faf8f4;

  /* derived shades — no need to edit */
  --brand-primary-dark:   color-mix(in oklab, var(--brand-primary), black 22%);
  --brand-primary-light:  color-mix(in oklab, var(--brand-primary), white 28%);
  --brand-link:           color-mix(in oklab, var(--brand-primary), black 42%); /* AA on white */
  --brand-link-dark:      color-mix(in oklab, var(--brand-primary), white 35%); /* dark mode */
  --brand-accent-light:   color-mix(in oklab, var(--brand-accent),  white 22%);
  --brand-highlight-soft: color-mix(in oklab, var(--brand-highlight) 22%, transparent);
}

/* ---- Light scheme (default) ---- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--brand-primary);
  --md-primary-fg-color--light: var(--brand-primary-light);
  --md-primary-fg-color--dark: var(--brand-primary-dark);
  --md-primary-bg-color: var(--brand-ink); /* dark text on a light/bright header */

  --md-accent-fg-color: var(--brand-accent);
  --md-accent-fg-color--transparent: color-mix(in oklab, var(--brand-accent) 12%, transparent);

  --md-typeset-a-color: var(--brand-link); /* darker than header → readable links */
  --md-default-bg-color: var(--brand-paper);
  --md-typeset-mark-color: var(--brand-highlight-soft);
}

/* ---- Dark scheme (slate) ---- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--brand-primary);
  --md-primary-fg-color--light: var(--brand-primary-light);
  --md-primary-fg-color--dark: var(--brand-primary-dark);
  --md-primary-bg-color: var(--brand-ink);

  --md-accent-fg-color: var(--brand-accent-light);
  --md-accent-fg-color--transparent: color-mix(in oklab, var(--brand-accent-light) 14%, transparent);

  --md-typeset-a-color: var(--brand-link-dark);
  --md-typeset-mark-color: color-mix(in oklab, var(--brand-highlight) 40%, transparent);
}

/* ---- Highlight (third color) touches, used sparingly ---- */
.md-typeset .admonition.note,
.md-typeset details.note { border-left-color: var(--brand-highlight); }
.md-typeset .note > .admonition-title,
.md-typeset .note > summary { background-color: color-mix(in oklab, var(--brand-highlight) 12%, transparent); }
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before { background-color: var(--brand-highlight); }
.md-tabs__link--active { border-bottom: 2px solid var(--brand-highlight); }

/* ---- Header logo (full lockup) — drop the duplicate site-name text ---- */
.md-header__button.md-logo img,
.md-nav__button.md-logo img { height: 2.1rem; width: auto; }
.md-header__title { display: none; } /* logo carries the wordmark */

/* ---- Sidebar hierarchy: section labels read as groups, not links ---- */
.md-nav__item--section > .md-nav__link {
  font-weight: 700;
  color: var(--brand-link);
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}
[data-md-color-scheme="slate"] .md-nav__item--section > .md-nav__link { color: var(--brand-link-dark); }
.md-nav__item--nested > .md-nav__link { font-weight: 600; }

/* ---- Launch date + release badge under the page title (overrides/main.html) ---- */
.doc-meta { display: flex; gap: 0.5rem; align-items: center; margin: 0.2rem 0 -0.4rem; font-size: 0.68rem; }
.doc-meta__launched { color: var(--md-default-fg-color--light); text-transform: uppercase; letter-spacing: 0.04em; }
.doc-meta__release {
  padding: 0.08rem 0.4rem;
  border-radius: 1rem;
  font-weight: 700;
  color: var(--brand-ink);
  background: var(--brand-highlight);
}
.doc-meta__release:hover { background: var(--brand-primary-dark); }