/* Design tokens — Proxy docs site redesign
   Warm-neutral paper + ink + single teal accent + IBM Plex / Instrument Serif */

:root {
  /* surfaces */
  --bg-canvas: #f7f5f0;
  --bg-paper: #ffffff;
  --bg-sunken: #f1eee6;
  --bg-code: #1a1815;
  --bg-code-paper: #faf8f3;

  /* ink */
  --ink-strong: #1a1815;
  --ink-base: #3a3530;
  --ink-muted: #7a716a;
  --ink-soft: #b0a89e;
  --ink-inverse: #f7f5f0;

  /* rules / dividers */
  --rule: #e8e2d6;
  --rule-strong: #d8d0c2;
  --rule-faint: #efeae0;

  /* accent — deep teal, restrained chroma */
  --accent: oklch(0.52 0.09 195);
  --accent-ink: oklch(0.42 0.09 195);
  --accent-soft: oklch(0.95 0.025 195);
  --accent-rule: oklch(0.88 0.04 195);

  /* signals — same chroma family */
  --ok: oklch(0.55 0.10 155);
  --ok-soft: oklch(0.95 0.025 155);
  --warn: oklch(0.65 0.12 75);
  --warn-soft: oklch(0.95 0.04 75);
  --danger: oklch(0.55 0.14 25);
  --danger-soft: oklch(0.95 0.03 25);

  /* type */
  --f-display: "Instrument Serif", "Source Serif Pro", Georgia, serif;
  --f-sans: "IBM Plex Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* spacing rhythm */
  --pad-xs: 6px;
  --pad-sm: 10px;
  --pad-md: 16px;
  --pad-lg: 24px;
  --pad-xl: 40px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
}

/* Base reset within artboards */
.proxy-app, .proxy-app * { box-sizing: border-box; }
.proxy-app {
  font-family: var(--f-sans);
  font-feature-settings: "ss01", "cv11";
  color: var(--ink-base);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.005em;
}
.proxy-app a { color: inherit; text-decoration: none; }

/* --- Shared top bar --- */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 24px;
  background: var(--bg-paper);
  border-bottom: 1px solid var(--rule);
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.topbar .brand .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.topbar .brand strong {
  color: var(--ink-strong);
  font-weight: 500;
}
.topbar .divider {
  width: 1px;
  height: 18px;
  background: var(--rule);
}
.topbar .nav {
  display: flex;
  gap: 2px;
  margin-left: 8px;
  flex-shrink: 0;
}
.topbar .nav a {
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--ink-muted);
  transition: color .12s, background .12s;
  white-space: nowrap;
}
.topbar .nav a:hover { color: var(--ink-strong); background: var(--bg-sunken); }
.topbar .nav a.active {
  color: var(--ink-strong);
  background: var(--bg-sunken);
}
.topbar .spacer { flex: 1; }
.topbar .meta {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-muted);
  background: var(--bg-paper);
}
.topbar .pill .live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 2px var(--ok-soft);
}

/* --- Display type --- */
.display-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: normal;
  color: var(--ink-strong);
  letter-spacing: -0.015em;
  line-height: 1.02;
}

/* --- Code block --- */
.code {
  font-family: var(--f-mono);
  font-size: 12.5px;
  line-height: 1.6;
  background: var(--bg-code);
  color: #d8d4cc;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  overflow: hidden;
  white-space: pre;
  border: 1px solid #2a2622;
}
.code .k { color: #d8a878; }      /* keyword / method */
.code .s { color: #a3c594; }      /* string */
.code .n { color: #e8c87a; }      /* number */
.code .c { color: #7a716a; font-style: italic; } /* comment */
.code .p { color: #b59a6c; }      /* punctuation/property */
.code .v { color: #f0ebe2; }      /* value */

/* --- Inline code --- */
code.inline, .ic {
  font-family: var(--f-mono);
  font-size: 0.88em;
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg-paper);
  color: var(--ink-strong);
}

/* --- Method badges --- */
.method {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}
.method.get  { background: oklch(0.95 0.04 195); color: oklch(0.42 0.09 195); }
.method.post { background: oklch(0.95 0.04 145); color: oklch(0.40 0.10 155); }
.method.ws   { background: oklch(0.95 0.05 295); color: oklch(0.42 0.10 295); }

/* --- Tier chip --- */
.tier {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--rule);
  color: var(--ink-base);
  background: var(--bg-paper);
}
.tier::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-soft);
}
.tier.premium::before { background: oklch(0.55 0.13 295); }
.tier.standard::before { background: var(--accent); }
.tier.value::before { background: oklch(0.60 0.14 165); }
.tier.basic::before { background: oklch(0.65 0.12 75); }
.tier.trial::before { background: oklch(0.60 0.10 30); }

/* --- Buttons --- */
.btn {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--rule-strong);
  background: var(--bg-paper);
  color: var(--ink-strong);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .04s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn:hover { background: var(--bg-sunken); border-color: var(--ink-soft); }
.btn:active { transform: translateY(0.5px); }
.btn.primary {
  background: var(--ink-strong);
  border-color: var(--ink-strong);
  color: var(--ink-inverse);
}
.btn.primary:hover { background: #000; }
.btn.accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.accent:hover { background: var(--accent-ink); }
.btn.ghost {
  background: transparent;
  border-color: transparent;
}
.btn.ghost:hover { background: var(--bg-sunken); }

/* --- Inputs --- */
.input {
  width: 100%;
  font-family: var(--f-sans);
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md);
  background: var(--bg-paper);
  color: var(--ink-strong);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input::placeholder { color: var(--ink-soft); }
.input.mono { font-family: var(--f-mono); font-size: 13px; }

.label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
  display: block;
}
.hint {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 6px;
}

/* --- Section eyebrow --- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* --- Card --- */
.card {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

/* --- Tables --- */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tbl th, .tbl td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.tbl th {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--rule);
}
.tbl tr:last-child td { border-bottom: none; }