/* OpenAdapt docs — Material chrome on the canonical OpenAdapt design tokens.
 *
 * The palette lives in stylesheets/vendor/openadapt-web/tokens.css, a
 * byte-identical vendored copy of styles/tokens.css in OpenAdaptAI/openadapt-web.
 * mkdocs.yml loads that file first, so every custom property it defines is in
 * scope here. See VENDORED.txt beside it.
 *
 * Rules this file follows, each enforced by tests/test_design_tokens.py:
 *   - It never redefines a canonical colour token. It maps them onto the
 *     Material for MkDocs variables and derives tints with color-mix().
 *   - It carries no literal hex colour at all. A colour that is not reachable
 *     from a canonical token does not belong on this site.
 *
 * The --oa-* names below are the docs theme's local aliases. They exist so the
 * rules further down read in product terms rather than in Material's terms.
 */

:root {
  /* Light-scheme aliases onto the canonical tokens. */
  --oa-ground: var(--surface);
  --oa-panel: var(--surface-raised);
  --oa-sunken: var(--surface-sunken);
  --oa-hairline: var(--hairline);
  --oa-hairline-strong: var(--hairline-strong);
  --oa-ink: var(--ink);
  --oa-ink-2: var(--text-secondary);
  --oa-ink-3: var(--text-tertiary);
  --oa-accent: var(--accent-verified);
  --oa-accent-hover: var(--accent-verified-hover);
  --oa-link-visited: var(--link-visited);
  --oa-focus-ring: var(--focus-ring);

  /* Decorative tints. Chrome only; no text is set in either of these. */
  --oa-accent-bright: color-mix(in srgb, var(--accent-verified) 78%, var(--surface-raised));
  --oa-ink-wash: color-mix(in srgb, var(--ink) 6%, transparent);

  --oa-link-underline: color-mix(in srgb, var(--accent-verified) 58%, transparent);
  --oa-link-visited-underline: color-mix(in srgb, var(--link-visited) 60%, transparent);

  --oa-display-font: var(--font-display);
  --oa-body-font: var(--font-body);
  --oa-mono-font: var(--font-mono);
  --oa-radius-card: var(--radius-md);

  --md-text-font: var(--oa-body-font);
  --md-code-font: var(--oa-mono-font);
}

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

  --md-default-bg-color: var(--oa-ground);
  --md-default-fg-color: var(--oa-ink);
  --md-default-fg-color--light: var(--oa-ink-2);
  --md-default-fg-color--lighter: var(--oa-ink-3);
  --md-typeset-a-color: var(--oa-accent);
  --md-footer-bg-color: var(--oa-ink);
  --md-footer-bg-color--dark: var(--inset-raised);
  --md-primary-bg-color: var(--oa-ink);
  --md-primary-bg-color--light: var(--oa-ink-2);
}

/* Cards / code / tables sit on the raised surface for depth. */
[data-md-color-scheme="default"] .md-typeset code,
[data-md-color-scheme="default"] .md-typeset pre > code,
[data-md-color-scheme="default"] .md-typeset table:not([class]) th {
  background-color: var(--oa-panel);
}
[data-md-color-scheme="default"] .md-main,
[data-md-color-scheme="default"] .md-content {
  background-color: var(--oa-ground);
}
[data-md-color-scheme="default"] .md-typeset .md-typeset__table,
[data-md-color-scheme="default"] .md-typeset table:not([class]) {
  border-color: var(--oa-hairline);
}

/* ---- Dark scheme (slate) --------------------------------------------
   The canonical set carries one dark surface family, --inset-*. It is the
   same family the marketing site uses for its dark insets, so the docs in
   dark mode and an inset on openadapt.ai are the same two greys.          */
[data-md-color-scheme="slate"] {
  --oa-ink-2: color-mix(in srgb, var(--inset-text) 70%, var(--inset-bg));
  --oa-ink-3: color-mix(in srgb, var(--inset-text) 70%, var(--inset-bg));
  --oa-accent: var(--inset-ok);
  --oa-accent-hover: color-mix(in srgb, var(--inset-ok) 70%, var(--surface-raised));
  --oa-link-visited: color-mix(in srgb, var(--link-visited) 30%, var(--inset-text));
  --oa-link-underline: color-mix(in srgb, var(--inset-ok) 62%, transparent);
  --oa-link-visited-underline: color-mix(in srgb, var(--link-visited) 30%, transparent);
  --oa-focus-ring: color-mix(in srgb, var(--focus-ring) 35%, var(--inset-text));
  --oa-ink-wash: color-mix(in srgb, var(--inset-text) 8%, transparent);

  --md-primary-fg-color: var(--inset-bg);
  --md-primary-fg-color--light: var(--inset-raised);
  --md-primary-fg-color--dark: color-mix(in srgb, var(--inset-bg) 80%, black);
  --md-accent-fg-color: var(--inset-ok);
  --md-typeset-a-color: var(--inset-ok);
  --md-default-bg-color: var(--inset-bg);
  --md-footer-bg-color: color-mix(in srgb, var(--inset-bg) 80%, black);
}

/* ---- Shared type + chrome ------------------------------------------- */
body {
  font-family: var(--oa-body-font);
}

.md-grid {
  max-width: 72rem;
}

.md-header {
  border-bottom: 1px solid var(--oa-hairline);
  box-shadow: none;
}
.md-header__inner {
  min-height: 3rem;
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: auto;
  width: 5.4rem;
}
.md-header__button.md-logo {
  margin-right: 0.25rem;
  padding-left: 0;
  padding-right: 0;
}
.md-header__topic:first-child .md-ellipsis {
  font-size: 0;
}
.md-header__topic:first-child .md-ellipsis::after {
  color: var(--oa-ink-2);
  content: "Docs";
  font-family: var(--oa-body-font);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
[data-md-color-scheme="default"] .md-header {
  background: color-mix(in srgb, var(--surface-raised) 97%, transparent);
  color: var(--oa-ink);
}
[data-md-color-scheme="default"] .md-header__button,
[data-md-color-scheme="default"] .md-header__title {
  color: var(--oa-ink);
}
[data-md-color-scheme="default"] .md-search__form {
  background: var(--oa-ink-wash);
}
[data-md-color-scheme="default"] .md-search__input,
[data-md-color-scheme="default"] .md-search__input::placeholder {
  color: var(--oa-ink-2);
}
[data-md-color-scheme="slate"] .md-header__button.md-logo img {
  filter: brightness(0) invert(1);
}
[data-md-color-scheme="slate"]
  .md-header__topic:first-child
  .md-ellipsis::after {
  color: var(--oa-ink-2);
}
.md-header__title {
  font-family: var(--oa-display-font);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: var(--oa-display-font);
  font-weight: 650;
  letter-spacing: -0.015em;
}
.md-typeset h1 {
  color: var(--oa-ink);
  font-size: clamp(2rem, 4vw, 2.55rem);
  line-height: 1.12;
  margin-bottom: 0.75em;
}
.md-typeset h2 {
  line-height: 1.22;
}
.md-typeset {
  line-height: 1.65;
}
.md-main__inner {
  margin-top: 1.5rem;
}
.md-content__inner {
  padding-bottom: 3rem;
}

/* Material keeps chrome and card links visually quiet. Prose and data links
   retain a persistent underline so color is never their only affordance. */
.md-typeset :where(p, li, dd, blockquote, figcaption, td) a:not(.md-button):not(.headerlink) {
  text-decoration-line: underline;
  text-decoration-color: var(--oa-link-underline);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  transition: color 0.16s ease, text-decoration-color 0.16s ease;
}
.md-typeset :where(p, li, dd, blockquote, figcaption, td) a:not(.md-button):not(.headerlink):visited {
  color: var(--oa-link-visited);
  text-decoration-color: var(--oa-link-visited-underline);
}
.md-typeset :where(p, li, dd, blockquote, figcaption, td) a:not(.md-button):not(.headerlink):hover {
  color: var(--oa-accent-hover);
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.12em;
}
.md-typeset :where(p, li, dd, blockquote, figcaption, td) a:not(.md-button):not(.headerlink):active {
  color: var(--md-default-fg-color);
  text-decoration-color: currentColor;
}

/* Card titles and actions remain a separate, quieter interaction tier. */
.md-typeset .grid.cards a {
  text-decoration-line: none;
}
.md-typeset .grid.cards a:hover {
  text-decoration-line: underline;
  text-underline-offset: 0.18em;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--oa-focus-ring) !important;
  outline-offset: 3px !important;
}
a:focus-visible {
  text-decoration-color: currentColor !important;
  text-decoration-thickness: 0.12em;
}
[data-md-color-scheme="slate"] .md-typeset h1 {
  color: var(--inset-text);
}

/* Keep the tab bar in the same chrome as the public-site nav. */
.md-tabs {
  border-bottom: 1px solid var(--oa-hairline);
  font-weight: 500;
}
[data-md-color-scheme="default"] .md-tabs {
  background: var(--oa-panel);
  color: var(--oa-ink-2);
}
[data-md-color-scheme="default"] .md-tabs__link--active,
[data-md-color-scheme="default"] .md-tabs__link:hover {
  color: var(--oa-accent);
}

.md-nav__link--active {
  font-weight: 600;
}

/* Material actions use the same ink and outline pills as openadapt.ai. */
.md-typeset .md-button {
  border: 0.075rem solid var(--oa-ink);
  border-radius: 9999px;
  font-weight: 600;
  padding: 0.55em 1.15em;
  transition: background-color 0.16s ease, border-color 0.16s ease,
    color 0.16s ease;
}
[data-md-color-scheme="default"] .md-typeset .md-button {
  color: var(--oa-ink);
}
[data-md-color-scheme="default"] .md-typeset .md-button:hover {
  background: var(--oa-ink-wash);
  border-color: var(--oa-ink);
  color: var(--oa-ink);
}
[data-md-color-scheme="default"] .md-typeset .md-button--primary {
  background: var(--oa-ink);
  border-color: var(--oa-ink);
  color: var(--oa-ground);
}
[data-md-color-scheme="default"] .md-typeset .md-button--primary:hover {
  background: var(--inset-raised);
  border-color: var(--inset-raised);
  color: var(--oa-ground);
}
[data-md-color-scheme="slate"] .md-typeset .md-button {
  border-color: var(--inset-text);
  color: var(--inset-text);
}
[data-md-color-scheme="slate"] .md-typeset .md-button--primary {
  background: var(--inset-text);
  color: var(--inset-bg);
}

/* Hero lede on the home page. */
.md-typeset .oa-lede {
  font-size: 1.28rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--oa-ink-2);
  max-width: 40rem;
}

/* Differentiator / feature grid (Material .grid.cards, lightly tuned). */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--oa-hairline);
  border-radius: var(--oa-radius-card);
  background: var(--oa-panel);
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li {
  border-color: var(--inset-border);
  background: var(--inset-raised);
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--oa-accent);
  box-shadow: var(--elevation-1);
}

/* Key-number callouts used on Home / benchmark. */
.md-typeset .oa-stat {
  font-size: 2rem;
  font-weight: 700;
  color: var(--oa-accent);
  line-height: 1.1;
}

/* Mermaid diagrams centered with a little breathing room. */
.md-typeset .mermaid {
  margin: 1.4em auto;
  text-align: center;
}

.md-typeset pre > code,
.md-typeset table:not([class]),
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--radius-sm);
}

/* The docs footer carries the same ground, hairline, and quiet links as the
   public site instead of switching to unrelated dark chrome. */
[data-md-color-scheme="default"] .md-footer {
  /* Material's footer children consume these variables directly. Define the
     light-scheme foreground scale on the component so copyright text, links,
     navigation labels, and icons cannot inherit the dark-footer defaults. */
  --md-footer-fg-color: var(--oa-ink);
  --md-footer-fg-color--light: var(--oa-ink-2);
  --md-footer-fg-color--lighter: var(--oa-ink-2);
  background: var(--oa-ground);
  border-top: 1px solid var(--oa-hairline);
  color: var(--oa-ink-2);
}
[data-md-color-scheme="default"] .md-footer-meta {
  background: var(--oa-panel);
}
[data-md-color-scheme="default"] .md-footer__link,
[data-md-color-scheme="default"] .md-footer__title,
[data-md-color-scheme="default"] .md-footer-meta__inner,
[data-md-color-scheme="default"] .md-copyright,
[data-md-color-scheme="default"] .md-copyright__highlight,
[data-md-color-scheme="default"] .md-social__link {
  color: var(--oa-ink-2);
}
[data-md-color-scheme="default"] .md-footer-meta.md-typeset a {
  color: var(--oa-accent);
}
[data-md-color-scheme="default"] .md-footer__link:hover,
[data-md-color-scheme="default"] .md-footer-meta.md-typeset a:focus,
[data-md-color-scheme="default"] .md-footer-meta.md-typeset a:hover,
[data-md-color-scheme="default"] .md-social__link:hover {
  color: var(--oa-accent-hover);
}
[data-md-color-scheme="default"] .md-copyright a {
  text-decoration: underline;
  text-decoration-color: var(--oa-link-underline);
  text-underline-offset: 0.2em;
}
[data-md-color-scheme="default"] .md-copyright {
  font-size: 0.72rem;
  line-height: 1.5;
}

/* Material's default slate footer mutes copyright links below AA contrast at
   the small footer size. Keep the dark footer quiet, but make every action
   readable against the actual footer background. */
[data-md-color-scheme="slate"] .md-footer,
[data-md-color-scheme="slate"] .md-footer-meta {
  background: color-mix(in srgb, var(--inset-bg) 80%, black);
}
[data-md-color-scheme="slate"] .md-footer__link,
[data-md-color-scheme="slate"] .md-footer__title,
[data-md-color-scheme="slate"] .md-footer-meta__inner,
[data-md-color-scheme="slate"] .md-copyright,
[data-md-color-scheme="slate"] .md-copyright__highlight,
[data-md-color-scheme="slate"] .md-social__link {
  color: var(--oa-ink-2);
}
[data-md-color-scheme="slate"] .md-footer-meta.md-typeset a {
  color: var(--oa-accent);
}
[data-md-color-scheme="slate"] .md-footer__link:hover,
[data-md-color-scheme="slate"] .md-footer-meta.md-typeset a:focus,
[data-md-color-scheme="slate"] .md-footer-meta.md-typeset a:hover,
[data-md-color-scheme="slate"] .md-social__link:hover {
  color: var(--oa-accent-hover);
}

@media screen and (max-width: 76.25em) {
  .md-grid {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }

  /* Material hides the desktop logo at drawer widths. Keep the complete
     product name in the compact title instead of reducing it to “Docs”. */
  .md-header__topic:first-child .md-ellipsis {
    font-family: var(--oa-display-font);
    font-size: 0.78rem;
    font-weight: 600;
  }
  .md-header__topic:first-child .md-ellipsis::after {
    content: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}