/* ByteBeacon design tokens — "Electric daylight" (see DESIGN.md).
 *
 * THIS FILE IS THE SOURCE OF TRUTH. The landing page (index.html) mirrors the
 * :root block inline rather than linking here, deliberately: it must paint
 * without a render-blocking stylesheet request. If you change a value here,
 * change it there too. Nothing else may hard-code a colour.
 *
 * Colour vocabulary, in one line each, so nobody has to guess:
 *   green — live / product. Primary actions, current selection, success.
 *   pink  — string / agent. Literals, ids, code, anything an agent reads.
 *   red   — destructive and error only. Never decoration.
 * There is no fourth accent (DESIGN.md, The Two-Voice Rule).
 */

:root {
  --ground: oklch(0.99 0 0);
  --surface: oklch(0.97 0.006 152);
  --line: oklch(0.9 0 0);
  --line-strong: oklch(0.78 0 0);
  --ink: oklch(0.16 0 0);
  --muted: oklch(0.45 0 0);

  --green: oklch(0.8 0.21 152);        /* baseten-electric, surfaces only */
  --green-bright: oklch(0.86 0.19 152);
  --green-ink: oklch(0.16 0.05 152);
  --green-deep: oklch(0.34 0.09 152);  /* secondary text ON green */
  --green-text: oklch(0.53 0.15 152);  /* readable green on light ground */
  --green-vivid: oklch(0.63 0.19 152); /* display-size green text — measured 3.09:1 */
  --green-tint: oklch(0.95 0.05 152);
  --green-light: oklch(0.9 0.12 152);   /* the drench band: light, still committed */
  --green-line: oklch(0.72 0.15 152);
  /* The footer sign-off is engraved: a pale plate cut by a fine line that
     follows the letterform exactly. */
  --signoff-face: oklch(0.955 0.012 152);
  --signoff-line: oklch(0.48 0.09 152);

  --pink: oklch(0.83 0.13 330);        /* #fea9fd — the second voice */
  --pink-text: oklch(0.53 0.19 330);   /* readable pink on light ground */
  --pink-tint: oklch(0.95 0.03 330);
  --pink-ink: oklch(0.2 0.06 330);

  --red: oklch(0.55 0.2 25);
  --red-tint: oklch(0.96 0.02 25);
  --red-line: oklch(0.8 0.12 25);

  /* code panels stay dark: the terminal is the one screen on the page */
  --panel: oklch(0.155 0 0);
  --panel-ink: oklch(0.94 0 0);
  --panel-muted: oklch(0.7 0 0);
  --panel-line: oklch(0.28 0 0);

  --font-sans: "Cabinet Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2.25rem; --s-7: 3.5rem;
  --section: clamp(4rem, 9vw, 6.5rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 10px;

  /* Semantic z-scale. Never write a bare number outside this list. */
  --z-sticky: 10;
  --z-toast: 40;
}

/* ============================================================================
 * bytebeacon.com/docs — generated by vite.docs.ts. Do not edit in dist/.
 *
 * The shell rules (skip link, header.site, .wordmark, nav.site-links,
 * footer.site, .signoff, .codepanel, the focus ring) are the landing's own,
 * with the same values, because the docs must read as the same site. The
 * values are the same because both sides resolve the tokens above.
 * ==========================================================================*/

* { box-sizing: border-box; margin: 0; }
html { color-scheme: light; scroll-behavior: smooth; }
body {
  background: var(--ground); color: var(--ink);
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.65;
  font-kerning: normal; overflow-x: clip;
}
::selection { background: var(--pink); color: var(--pink-ink); }
code, pre { font-family: var(--font-mono); font-variant-ligatures: none; }
a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--line-strong); text-underline-offset: 0.2em;
  transition: text-decoration-color 140ms var(--ease-out);
}
a:hover { text-decoration-color: var(--green-text); }
/* One ring for the whole surface, never removed and never restyled per
   component (DESIGN.md §5). */
:focus-visible { outline: 2px solid var(--green-text); outline-offset: 2px; border-radius: 2px; }

.wrap { max-width: 68rem; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
.skip {
  position: absolute; left: 1rem; top: -3rem; z-index: var(--z-sticky);
  background: var(--surface); padding: 0.5rem 1rem; border-radius: 6px;
  border: 1px solid var(--line-strong);
  transition: top 140ms var(--ease-out);
}
.skip:focus-visible { top: 1rem; }

/* ---------- header / footer: the landing's chrome ---------- */
header.site {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding-block: var(--s-5);
}
.wordmark {
  font-family: var(--font-mono); font-weight: 500; font-size: 1.125rem;
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.2em;
}
.wordmark .caret {
  display: inline-block; width: 0.42em; height: 1em;
  background: var(--green); border-radius: 1px;
}
nav.site-links { display: flex; align-items: center; gap: var(--s-5); font-size: 0.9375rem; }
nav.site-links a { text-decoration: none; color: var(--muted); transition: color 140ms var(--ease-out); }
nav.site-links a:hover { color: var(--ink); }
nav.site-links a.dash {
  color: var(--ink); border: 1px solid var(--line-strong); border-radius: 7px;
  padding: 0.35rem 0.85rem; transition: border-color 140ms var(--ease-out);
}
nav.site-links a.dash:hover { border-color: var(--green-text); }
@media (max-width: 40rem) { nav.site-links a:not(.dash) { display: none; } }

footer.site {
  border-top: 1px solid var(--line); padding-block: var(--s-7) 0;
  margin-top: var(--section); font-size: 0.875rem; color: var(--muted);
}
.footer-row {
  display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: baseline;
  justify-content: space-between;
}
footer.site nav { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--ink); }
.footer-tag { max-width: none; }
/* Engraved, not printed — the one named exception to the Flat-Voltage Rule
   (DESIGN.md §2). A stroke follows the letterform; a text-shadow deboss was
   tried on the landing and leaves slivers inside curves at this size. */
.signoff { margin-top: var(--s-7); overflow: hidden; container-type: inline-size; }
.signoff span {
  display: block; text-align: center; white-space: nowrap;
  font-family: var(--font-sans); font-weight: 700;
  font-size: min(18.2vw, 12.5rem); font-size: 20.2cqw;
  line-height: 0.82; letter-spacing: -0.035em;
  color: var(--signoff-face); user-select: none;
  -webkit-text-stroke: max(1px, 0.006em) var(--signoff-line);
  paint-order: stroke fill;
  padding-bottom: 0.18em;
}
@media (forced-colors: active) {
  .signoff span { color: CanvasText; -webkit-text-stroke: 0; }
}

/* ---------- the docs page ---------- */
.crumbs {
  display: flex; flex-wrap: wrap; gap: 0.4em; align-items: baseline;
  font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted);
  padding-top: var(--s-5);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current="page"] { color: var(--ink); }

main h1 {
  margin-top: var(--s-4);
  font-size: clamp(2.1rem, 2.6vw + 1.1rem, 2.9rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.015em;
  text-wrap: balance;
}

/* The TOC sits in its own column on a wide screen and above the prose on a
   narrow one — structural, not a type change (DESIGN.md §5). It is a plain
   <nav>: no scrollspy, no JS, nothing to highlight a current section with. */
.doc-grid {
  display: grid; gap: clamp(var(--s-5), 4vw, var(--s-7));
  grid-template-columns: minmax(0, 1fr) 15rem;
  align-items: start; margin-top: var(--s-6);
}
@media (max-width: 62rem) { .doc-grid { grid-template-columns: minmax(0, 1fr); } }
/* The TOC is FIRST in the DOM and SECOND in the visual order on a wide
   screen. That split is the point: a table of contents a screen-reader or
   keyboard user only reaches after reading the entire document is not a table
   of contents, and on a narrow viewport — where there is no second column —
   source order is all there is, so it has to be the right one there too. */
@media (min-width: 62.01rem) {
  .toc { position: sticky; top: var(--s-5); order: 2; max-height: calc(100vh - 4rem); overflow-y: auto; }
  .prose { order: 1; }
}
.toc { border-left: 1px solid var(--line); padding-left: var(--s-4); font-size: 0.875rem; }
@media (max-width: 62rem) {
  .toc {
    border-left: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: var(--s-4) 0;
  }
}
.toc-h {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.8125rem;
  letter-spacing: 0.02em; color: var(--muted); border-top: 0; padding-top: 0; margin: 0;
}
.toc ul { list-style: none; padding: 0; margin-top: var(--s-3); }
.toc li { max-width: none; padding-block: 0.18rem; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--green-text); }
.toc-3 { padding-left: var(--s-4); font-size: 0.8125rem; }
.toc code { font-family: var(--font-mono); font-size: 0.95em; }

/* ---------- prose ---------- */
.prose > * + * { margin-top: var(--s-4); }
.prose h2 {
  font-size: clamp(1.45rem, 1.5vw + 0.95rem, 1.85rem);
  font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance;
  border-top: 1px solid var(--line); padding-top: var(--s-5); margin-top: var(--s-7);
}
/* Endpoints are set in mono, verbatim — the Evidence Rule (DESIGN.md §3).
   Every h3 in api.md IS an endpoint, so the level and the voice agree. */
.prose h3 {
  font-family: var(--font-mono); font-weight: 500; font-size: 1rem;
  line-height: 1.4; letter-spacing: 0; margin-top: var(--s-6);
  overflow-wrap: anywhere;
}
.prose h2, .prose h3 { scroll-margin-top: var(--s-5); }
/* A section rule above the FIRST section is a rule under the h1, which
   already separates it. The /docs index opens on an h2 and wore both. */
.prose > :is(h2, h3):first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 code { background: none; padding: 0; color: var(--pink-text); }
.prose p, .prose li { max-width: 65ch; text-wrap: pretty; }
.prose strong { font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { padding-block: 0.15rem; }
.prose li > ul, .prose li > ol { margin-top: 0.15rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--s-6); }

/* Inline code is pink-on-pink-tint: the second voice, the agent's world
   (DESIGN.md §2, The Chip Rule). Never full-brightness pink as small text. */
.prose :is(p, li, td, th, dd) code {
  color: var(--pink-text); background: var(--pink-tint);
  font-size: 0.85em; padding: 0.08em 0.3em; border-radius: 3px;
  overflow-wrap: anywhere;
}

/* Heading anchors. Hidden until hover OR keyboard focus — focus alone would
   make them unusable with a mouse, hover alone would make them unreachable
   without one. */
.anchor {
  /* --muted (7.2:1), not --line-strong (measured 1.95:1). It is hidden until
     hover or focus, but when it is showing it is a LINK with text in it, so it
     owes the reader 4.5:1 like any other. */
  margin-left: 0.4em; color: var(--muted); text-decoration: none;
  opacity: 0; transition: opacity 140ms var(--ease-out);
}
:is(h2, h3, h4, h5, h6):hover .anchor, .anchor:focus-visible { opacity: 1; }
.anchor:hover { color: var(--green-text); }
@media (pointer: coarse) { .anchor { opacity: 1; } }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
.prose table { border-collapse: collapse; min-width: 30rem; width: 100%; font-size: 0.9375rem; }
.prose th, .prose td {
  text-align: left; vertical-align: top;
  padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line);
}
.prose th { font-weight: 700; border-bottom-color: var(--line-strong); }

/* ---------- code panels: the one dark screen on the page ---------- */
.codepanel {
  background: var(--panel); color: var(--panel-ink);
  border-radius: var(--radius); overflow: hidden;
  margin-top: var(--s-5);
}
.codepanel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 0.6rem 1.1rem; border-bottom: 1px solid var(--panel-line);
  font-family: var(--font-mono); font-size: 0.8125rem; color: var(--panel-muted);
  letter-spacing: 0.02em;
}
.codepanel pre {
  padding: 1.1rem 1.25rem; overflow-x: auto;
  font-size: 0.875rem; line-height: 1.65; tab-size: 2;
}
.codepanel :focus-visible { outline-color: var(--green); }

/* SYNTAX, at build time, in two voices and a neutral.
 *
 * highlight.js emits a class per scope; only the ones that are SAYABLE as one
 * of the two brand voices get a colour, and everything else inherits
 * --panel-ink. That is the Two-Voice Rule enforced by omission rather than by
 * a theme file: there is no list of twenty scopes here to drift into a third
 * accent.
 *
 *   pink  = string literal — the agent's world, and exactly what the landing's
 *           own panels colour ("s" on index.html).
 *   green = $BASE — the live endpoint, the landing's "g".
 *   muted = punctuation, comments and shebangs: structure, not content. A
 *           neutral, not a third accent. */
.hljs-string { color: var(--pink); }
.hljs-variable, .hljs-template-variable { color: var(--green); }
.hljs-comment, .hljs-punctuation, .hljs-meta { color: var(--panel-muted); }

/* ---------- the /docs index ---------- */
.doc-cards { list-style: none; padding: 0; }
.doc-cards li {
  max-width: none; border-top: 1px solid var(--line); padding-block: var(--s-4);
}
.doc-cards li:first-child { border-top: 0; }
.card-title { font-weight: 700; font-size: 1.125rem; text-decoration: none; }
.card-title:hover { text-decoration: underline; text-decoration-color: var(--green-text); }
.doc-cards p { color: var(--muted); margin-top: var(--s-1); }
/* The agent's lane: mono, pink, and pointing at the machine-readable twin —
   the same treatment the landing gives this block. */
.agent-links {
  list-style: none; padding: 0; margin-top: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  font-family: var(--font-mono); font-size: 0.875rem;
}
.agent-links li { max-width: none; }
.agent-links a {
  color: var(--pink-text);
  text-decoration-color: color-mix(in oklch, var(--pink-text) 40%, transparent);
}
.agent-links a:hover { color: var(--ink); }

/* ---------- touch targets ----------
   Standalone controls need a 44px hit area on coarse pointers; inline prose
   links are exempt (WCAG 2.5.8) and stretching them would break line rhythm. */
@media (pointer: coarse) {
  nav.site-links a, footer.site nav a, .agent-links a, .toc a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  nav.site-links a.dash { padding-block: 0.6rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}