/* Fence's Official Design System: its fonts, the tokens every page uses, and the site header. The docs' pages and
   the API reference's page (rendered by Scalar, outside the site's layout) both load this file, so the header rules
   are scoped to .site-header and never reach Scalar's own markup. */

/* Inter, as Fence's dashboard uses it, so a client sees one typeface across Fence's products. The variable font holds
   every weight from 400 to 600 in one file; the docs use 400 and 500. Latin subset, from Google Fonts. */
@font-face {
  font-family: 'Inter';
  src: url('/brand/fonts/Inter-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Gold #DEB483 is 1.9:1 on the light paper, so on light it only fills (the primary button) or underlines; text and
   strokes that must be read take --accent, a bronze of the same hue. Ratios are in DESIGN.md. */
:root {
  color-scheme: light dark;
  --ink: #1b1b1b;
  --muted: #4a4a4a;
  --line: rgba(27, 27, 27, 0.18);
  --edge: rgba(27, 27, 27, 0.55);
  --paper: #fffcf8;
  --wash: #f8f0e6;
  --accent: #8a5a24;
  --gold: #deb483;
  --gold-press: #d2a46e;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #fffcf8;
    --muted: #afadab;
    --line: rgba(255, 252, 248, 0.18);
    --edge: rgba(255, 252, 248, 0.45);
    --paper: #1b1b1b;
    --wash: #242424;
    --accent: #deb483;
  }
}


.site-header {
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
.site-header a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}
.site-header code { font-family: var(--mono); font-size: 0.875em; background: var(--wash); padding: 0.1em 0.35em; border-radius: 4px; }
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.site-header .brand { display: inline-flex; align-items: center; gap: 0.875rem; text-decoration: none; color: var(--ink); }
.site-header .brand img { display: block; height: 24px; width: auto; }
.site-header .brand .on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .site-header .brand .on-light { display: none; }
  .site-header .brand .on-dark { display: block; }
}
.site-header .brand span {
  padding-left: 0.875rem;
  border-left: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 24px;
}
.site-header nav { display: flex; gap: 0.5rem 1.5rem; align-items: center; flex-wrap: wrap; font-size: 0.9375rem; }
.site-header nav a { text-decoration-color: transparent; }
.site-header nav a:hover { text-decoration-color: var(--gold); }
.site-header .pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: 0.35rem 0.85rem;
  font-weight: 500;
  text-decoration: none;
}
.site-header .pill:hover { background: var(--wash); }
.site-header .pill.primary {
  border: 0;
  border-radius: 8px;
  background: var(--gold);
  color: #1b1b1b;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms var(--ease);
}
.site-header .pill.primary:hover { background: var(--gold-press); }