/* brand.css — App Use accent overrides on top of the Atropos theme.
 *
 * The base theme (assets/css/theme.min.css) is a compiled Bootstrap 5.1 build
 * whose primary colour is baked into the utility classes as hex values (not
 * CSS variables), so we re-assert the App-Use accent on the specific
 * primary-coloured classes the pages use. Loaded AFTER theme.min.css.
 * Never edit theme.min.css directly — it is regenerated on theme refresh. */

:root {
  --au-primary: #0891b2;        /* cyan-600 — App Use accent */
  --au-primary-dark: #0e7490;   /* cyan-700 — hover/active */
  --au-primary-soft: #e0f5fa;   /* tint for soft backgrounds */
}

/* Content links (all colour utilities in the theme use !important, so plain
   anchors are safely recoloured without disturbing .text-white / .text-gray-* ). */
a { color: var(--au-primary); }
a:hover { color: var(--au-primary-dark); }

.text-primary { color: var(--au-primary) !important; }
.bg-primary   { background-color: var(--au-primary) !important; }
.border-primary { border-color: var(--au-primary) !important; }
.link-primary { color: var(--au-primary) !important; }
.link-primary:hover { color: var(--au-primary-dark) !important; }

.btn-primary {
  background-color: var(--au-primary);
  border-color: var(--au-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:focus-visible {
  background-color: var(--au-primary-dark) !important;
  border-color: var(--au-primary-dark) !important;
  color: #fff !important;
  box-shadow: none;
}

.btn-outline-primary {
  color: var(--au-primary);
  border-color: var(--au-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--au-primary);
  border-color: var(--au-primary);
  color: #fff;
}

/* Soft accent panel used on feature sections. */
.bg-primary-soft { background-color: var(--au-primary-soft); }

/* Keep focus rings on-brand. */
.form-control:focus,
.form-select:focus {
  border-color: var(--au-primary);
  box-shadow: 0 0 0 0.25rem rgba(8, 145, 178, 0.25);
}

/* Docs section — sticky sidebar + content rhythm. */
.docs-sidebar { position: sticky; top: 1.5rem; }
.docs-nav .nav-link { padding: 0.3rem 0; color: var(--bs-gray-700); }
.docs-nav .nav-link:hover { color: var(--au-primary); }
.docs-nav .nav-link.active { color: var(--au-primary); font-weight: 700; border-left: 3px solid var(--au-primary); padding-left: 0.6rem; margin-left: -0.75rem; }
.docs-nav .docs-section { font-size: 0.7rem; letter-spacing: 0.04em; }
.docs-content h2 { margin-top: 2.5rem; }
.docs-content h3 { margin-top: 1.5rem; }
.docs-content pre { background: #0b1324; color: #e6edf3; padding: 1rem 1.25rem; border-radius: 0.5rem; overflow-x: auto; }
.docs-content pre code { color: inherit; }
.docs-content table { width: 100%; }

/* Monospace inline tokens (protocol / tool names) on content pages. */
code.au-token {
  background: var(--au-primary-soft);
  color: var(--au-primary-dark);
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
  font-size: 0.875em;
}