/* /eto-dev-api-v2 — design layer over etsy_reference.css.

   The generated document keeps its markup; this file brings it into the same
   language as the rest of the public site and the v1 reference:
     - Geist for text, Geist Mono for paths and figures, Perfectly Nineties
       for the page title alone (the generator's OpenSauce/Melodrame pair is
       the previous system),
     - a white page over a warm well, hairlines, 4px corners, no shadows,
     - three status tones instead of an orange accent on everything,
     - light by default, following the system and the html[data-theme] switch.
   Loaded after etsy_reference.css, so every rule here is an override. */

@font-face {
  font-family: "Perfectly Nineties";
  src: url("../landing/lp/fonts/PerfectlyNineties-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- palette */
:root[data-theme="light"] {
  --bg: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #faf9f7;
  --raised: #ffffff;
  --text: #070707;
  --muted: rgba(7, 7, 7, 0.63);
  --faint: rgba(7, 7, 7, 0.45);
  --border: #e4e4e7;
  --border-soft: #ececef;
  --hairline: #e4e4e7;
  --lift: transparent;
  --accent: #070707;
  --accent-quiet: rgba(7, 7, 7, 0.63);
  --danger: #a32d1d;
  --shadow: none;
  --code-bg: #101114;
  --code-text: #e8e6e3;
  --tone-pos: #1f7a4d;
  --tone-neg: #a32d1d;
  --tone-warn: #b4540f;
  --ink-5: rgba(7, 7, 7, 0.05);
}
:root[data-theme="dark"] {
  --bg: #141518;
  --surface-1: #141518;
  --surface-2: #1a1b1e;
  --raised: #1a1b1e;
  --text: #f4f4f5;
  --muted: rgba(244, 244, 245, 0.66);
  --faint: rgba(244, 244, 245, 0.44);
  --border: #2c2d32;
  --border-soft: #26272b;
  --hairline: #2c2d32;
  --lift: transparent;
  --accent: #f4f4f5;
  --accent-quiet: rgba(244, 244, 245, 0.72);
  --danger: #e2897b;
  --shadow: none;
  --code-bg: #0e0f11;
  --code-text: #e8e6e3;
  --tone-pos: #6cbb92;
  --tone-neg: #e2897b;
  --tone-warn: #dfa165;
  --ink-5: rgba(244, 244, 245, 0.06);
}

/* ------------------------------------------------------------------- type */
body {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  font-synthesis-weight: auto;
}
code, pre, kbd, .p-name, .endpoint-url, .op-title, .method, .status, .mini-method,
.pn, .pty, .d-ver a, .d-preview, .log-date {
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
h1 {
  font-family: "Perfectly Nineties", "Iowan Old Style", Georgia, serif;
  letter-spacing: -0.015em;
}
.tag-title {
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.op-title { font-size: 16px; }
.crumb { color: var(--faint); letter-spacing: 0.04em; font-size: 11px; }
.ver-chip { color: var(--muted); }
::selection { background: #e4e4e7; color: var(--text); }
:root[data-theme="dark"] ::selection { background: #3b3c43; color: var(--text); }

/* Links read as ink with a dotted underline, the way the rest of the site does. */
a { color: var(--text); }
.lead a, .op-desc a, .prose a, .callout a, .banner-text a {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--border);
  text-underline-offset: 4px;
}
.lead a:hover, .op-desc a:hover, .prose a:hover, .callout a:hover {
  color: var(--text);
  text-decoration-style: solid;
  text-decoration-color: var(--text);
}
a:hover, :root[data-theme="dark"] a:hover { color: var(--text); }

/* ------------------------------------------------------------- 4px corners */
.endpoint, .code-card, .d-search, .d-theme, .copy-btn, .d-search-panel,
.side-count, .wt-badge, .d-ver, .d-preview, .d-burger { border-radius: 4px; }
.endpoint, .code-card, .d-search-panel { box-shadow: none; }
.endpoint { background: var(--surface-2); border-color: var(--border); }
.code-card { border-color: var(--border); }
:root[data-theme="light"] .code-card { border-color: #d4d4d8; }

/* ------------------------------------------------------------------ tones */
.method, .mini-method, .m { color: var(--faint); letter-spacing: 0.04em; }
.method-get, .mm-get, .m-get { color: var(--tone-pos); }
.method-post, .mm-post, .m-post { color: var(--text); }
.method-put, .method-patch, .mm-put, .mm-patch, .m-put, .m-patch { color: var(--tone-warn); }
:root[data-theme="dark"] .mm-patch { color: var(--tone-warn); }
.method-delete, .mm-delete, .m-delete { color: var(--tone-neg); opacity: 1; }
.status { color: var(--tone-pos); }
.status-err { color: var(--tone-neg); }
.p-req, .pr { color: var(--tone-warn); }
.auth-scopes code { color: var(--muted); }
.path-var { color: var(--muted); }
.info-card strong { color: var(--text); font-family: "Geist Mono", ui-monospace, monospace; font-size: 14px; }
.side-link.is-active { color: var(--text); border-left-color: var(--text); }
.side-group.has-active > summary { color: var(--text); }
.toc-link.is-active { color: var(--text); border-left-color: var(--text); }
.anchor-link:hover, .copy-btn:hover, .copy-btn.copied { color: var(--text); border-color: var(--text); }
.d-search:hover, .d-theme:hover { border-color: var(--text); color: var(--text); }
.code-card .copy-btn { border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.5); }
.code-card .copy-btn:hover, .code-card .copy-btn.copied { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.tk { color: #e5b981; }
.ts { color: #d8d4cf; }
.tn { color: #9fb4c4; }
.tb { color: #c79a63; }

/* ------------------------------------------------------- version + preview */
.d-ver {
  display: flex;
  margin: 12px 14px 2px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.d-ver a {
  flex: 1;
  padding: 6px 4px;
  border-left: 1px solid var(--border);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}
.d-ver a:first-child { border-left: 0; }
.d-ver a:hover { background: var(--ink-5); color: var(--text); }
.d-ver a[aria-current="page"] { background: var(--text); color: var(--bg); }

.d-preview {
  flex: none;
  padding: 2px 7px;
  border: 1px solid var(--tone-warn);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tone-warn);
  white-space: nowrap;
}

.callout-preview { border-top-color: var(--border); }
.callout-preview .callout-title { color: var(--tone-warn); }
.callout-preview p { color: var(--muted); max-width: 74ch; }

/* ------------------------------------------------------------- changelog */
.log { border-top: 1px solid var(--border-soft); margin-top: 18px; max-width: 74ch; }
.log-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 2px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}
.log-date {
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 2px;
}
.log-title { font-size: 14.5px; color: var(--text); }
.log-body { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-top: 2px; }

/* ------------------------------------------------------- imported prose bits */
.prose .d-note {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 74ch;
}
.prose .d-note svg { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--faint); }
.prose .d-note-warn { border-left-color: var(--tone-warn); }
.prose .d-note-warn svg { color: var(--tone-warn); }
.prose .d-note-stop { border-left-color: var(--tone-neg); }
.prose .d-note-stop svg { color: var(--tone-neg); }
.prose .d-note strong { color: var(--text); }
.prose .d-cb { margin: 14px 0; }
.prose .d-cb-label {
  margin-bottom: 6px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--faint);
}
.prose .eto-b { display: none; }
.prose .err {
  display: grid;
  grid-template-columns: 230px 52px minmax(0, 1fr);
  gap: 3px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
}
.prose .err-code { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12.5px; color: var(--text); }
.prose .err-4xx .err-code { color: var(--tone-warn); }
.prose .err-5xx .err-code { color: var(--tone-neg); }
.prose .err-st { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12.5px; color: var(--faint); }
.prose .err-msg { font-size: 13.5px; color: var(--muted); }
.prose .err-hint { grid-column: 3; font-size: 12.5px; color: var(--faint); }

@media (max-width: 720px) {
  .log-row { grid-template-columns: 1fr; }
  .prose .err { grid-template-columns: 1fr; }
  .prose .err-hint { grid-column: 1; }
  .d-preview { display: none; }
}