/* ═══════════════════════════════════════════════════════════════════
   Docs chrome — shared by every page, loaded after the Cumbuca DS
   (tokens.css, base.css, button.css, tabs.css; see scripts/build.ts).

   Colors, type and motion come ONLY from DS tokens, so everything here
   follows `data-theme` on <html> by itself.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Docs aliases ────────────────────────────────────────────────────
   Roles the DS has no token for yet. They point at DS tokens, never at a
   literal color — candidates to move into the DS if another app needs them. */
:root {
  /* Code samples: JSON keys / strings / numbers / booleans / comments.
     Categorical 7…12 are the darker (light theme) / lighter (dark theme)
     steps of the brand hues - legible as text on code surfaces in both. */
  --syntax-key: var(--categorical-7);
  --syntax-str: var(--categorical-10);
  --syntax-num: var(--categorical-8);
  --syntax-bool: var(--color-danger);
  --syntax-attr: var(--categorical-11);
  --syntax-comment: var(--text-muted);
  /* HTTP verb badges. Verbs are categories, not states: DS categorical hues
     (GET mint, POST indigo, PUT gold, PATCH orchid) on the 7…12 steps - dark
     in the light theme with a white label, pastel in the dark theme with an
     ink label (--text-on-categorical-* flips by itself); AA in both (≥ 7.8:1).
     A dark badge never carries a dark label. DELETE is the one destructive
     verb, so it takes the danger fill. */
  --verb-get: var(--categorical-10);
  --verb-get-text: var(--text-on-categorical-10);
  --verb-post: var(--categorical-7);
  --verb-post-text: var(--text-on-categorical-7);
  --verb-put: var(--categorical-8);
  --verb-put-text: var(--text-on-categorical-8);
  --verb-patch: var(--categorical-11);
  --verb-patch-text: var(--text-on-categorical-11);
  --verb-delete: var(--color-danger-fill);
  --verb-delete-text: var(--text-on-fill);
  --verb-other: var(--color-neutral-fill);
  --verb-other-text: var(--text-on-fill);
  /* Surface for code blocks, inline code and table headers. */
  --bg-code: var(--bg-track);
  /* Height of the sticky top nav; pages offset their own sticky bits by it. */
  --top-nav-height: 48px;
}

/* ── Top nav ──────────────────────────────────────────────────────── */
#top-nav {
  position: sticky;
  top: 0;
  z-index: 10000;
  display: flex;
  align-items: stretch;
  height: var(--top-nav-height);
  padding: 0 20px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-default);
  font: var(--type-body-font);
  letter-spacing: var(--tracking-body);
  color: var(--text-body);
}

.tn-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 28px;
  color: var(--text-heading);
  font-weight: var(--weight-emphasis);
  white-space: nowrap;
  text-decoration: none;
}

/* Wordmark: the logo has its own ink (--logo-ink), never the text color.
   The dark theme uses the white variant of the same mark. */
.tn-logo {
  display: block;
  height: 16px;
  width: auto;
  color: var(--logo-ink);
}

[data-theme='dark'] .tn-logo {
  color: var(--neutral-white);
}

.tn-product {
  padding-left: 10px;
  border-left: 1px solid var(--border-default);
}

/* Page links use the DS Tabs contract (.ds-tabs > .ds-tab[aria-current]);
   the nav's own border is the tab rail. */
.tn-pages.ds-tabs {
  flex: 1;
  align-items: stretch;
  border-bottom: 0;
  gap: 0;
}

.tn-pages .ds-tab {
  white-space: nowrap;
}

.tn-pages .ds-tab:hover {
  text-decoration: none;
}

.tn-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin-left: auto;
}

.tn-lang {
  display: flex;
  gap: 2px;
}

.tn-lang-link {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

button.tn-lang-link {
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.tn-lang-link:hover {
  color: var(--text-body);
  background: var(--bg-hover);
}

.tn-lang-link[aria-current='true'] {
  color: var(--accent-on-soft);
  background: var(--accent-soft);
  font-weight: var(--weight-emphasis);
}

/* Theme toggle = DS IconButton (.ds-iconbutton), a bit smaller to fit the
   48px bar. Shows the moon in light and the sun in dark. */
.tn-theme.ds-iconbutton {
  width: 32px;
  height: 32px;
}

.tn-theme svg {
  width: 16px;
  height: 16px;
}

.tn-theme .tn-sun,
[data-theme='dark'] .tn-theme .tn-moon {
  display: none;
}

[data-theme='dark'] .tn-theme .tn-sun {
  display: block;
}