/* Styles for the static Scalar docs page (docs.html). Brand values come from
   brand.css — keep raw hexes out of this file. */
@import "/brand.css";

/* Match Scalar's theme to the AthleteKit brand tokens. */
.light-mode {
  --scalar-color-accent: var(--ak-blaze);
  --scalar-background-1: var(--ak-page);
  --scalar-background-2: var(--ak-page);
  --scalar-background-3: var(--ak-page);
  --scalar-color-1: var(--ak-ink);
}
.dark-mode {
  --scalar-color-accent: var(--ak-blaze);
  --scalar-background-1: var(--ak-ink);
  --scalar-background-2: var(--ak-ink);
  --scalar-background-3: var(--ak-ink);
  --scalar-color-1: var(--ak-page);
}
/* Scalar nests request/sample cards in a .dark-mode wrapper even on light
   pages; keep those cards light when the page is light. */
.light-mode .dark-mode {
  --scalar-color-accent: var(--ak-blaze);
  --scalar-background-1: var(--ak-page);
  --scalar-background-2: var(--ak-muted);
  --scalar-background-3: var(--ak-muted);
  --scalar-color-1: var(--ak-ink);
  --scalar-color-2: var(--ak-text-muted);
  --scalar-color-3: var(--ak-faint);
  --scalar-border-color: var(--ak-hairline);
}
:root {
  --scalar-font: var(--ak-font-sans);
  --scalar-font-code: var(--ak-font-mono);
}

/* Slim cross-nav above the Scalar app. */
.ak-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.55rem 1.25rem;
  font: 500 13px/1.4 var(--ak-font-sans);
  background: var(--ak-page);
  border-bottom: 1px solid var(--ak-hairline);
}
.ak-nav a { color: var(--ak-text-muted); text-decoration: none; }
.ak-nav a:hover { color: var(--ak-ink); }
.ak-nav .ak-brand {
  margin-right: auto;
  font: 700 17px/1 var(--ak-font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ak-ink);
}
.ak-nav .ak-brand span { color: var(--ak-blaze); }
.ak-nav .ak-brand:hover { color: var(--ak-ink); }
@media (prefers-color-scheme: dark) {
  .ak-nav { background: var(--ak-ink); border-bottom-color: var(--ak-hairline-dark); }
  .ak-nav a { color: var(--ak-faint-a11y); }
  .ak-nav a:hover { color: var(--ak-page); }
  .ak-nav .ak-brand, .ak-nav .ak-brand:hover { color: var(--ak-page); }
}