/* ===== Bokko API Reference — Header Styles ===== */

:root {
  --api-header-bg: rgba(247,245,242,0.92);
  --api-header-border: #E5E1DB;
  --api-text-secondary: #6B7280;
  --api-dark: #2C3A3B;
  --api-accent: #F28B72;
  --api-accent-light: #FDE8E4;
  --api-font-headline: 'Plus Jakarta Sans', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --api-header-bg: rgba(22,27,28,0.95);
    --api-header-border: rgba(255,255,255,0.1);
    --api-text-secondary: #9CA3AF;
    --api-dark: #E8E4DF;
    --api-accent-light: rgba(242,139,114,0.15);
  }
}

html[data-theme="dark"] {
  --api-header-bg: rgba(22,27,28,0.95);
  --api-header-border: rgba(255,255,255,0.1);
  --api-text-secondary: #9CA3AF;
  --api-dark: #E8E4DF;
  --api-accent-light: rgba(242,139,114,0.15);
}

html[data-theme="light"] {
  --api-header-bg: rgba(247,245,242,0.92);
  --api-header-border: #E5E1DB;
  --api-text-secondary: #6B7280;
  --api-dark: #2C3A3B;
  --api-accent-light: #FDE8E4;
}

*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; padding: 0; }

.api-ref-header {
  position: sticky;
  top: 0;
  z-index: 10000;
  height: 48px;
  background: var(--api-header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--api-header-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.api-ref-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.api-ref-logo-img {
  height: 22px;
  width: auto;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .api-ref-logo-img { content: url('/logo-dark.png'); }
}

html[data-theme="dark"] .api-ref-logo-img { content: url('/logo-dark.png'); }

.api-ref-badge {
  font-family: var(--api-font-headline);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--api-accent);
  background: var(--api-accent-light);
  padding: 2px 7px;
  border-radius: 4px;
}

.api-ref-back {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--api-text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.api-ref-back:hover { color: var(--api-dark); }