/* Neutral surfaces, Hydra orange and restrained editorial typography. */
:root {
  --paper: #fff;
  --ink: #1e2227;
  --muted: #697077;
  --line: #e0e3e6;
  --soft: #f5f5f4;
  --accent: #ed591f;
  --orange: var(--accent);
  --intro-surface: #fafbfc;
  --tracking-card: #f4f4f2;
  --tracking-surface: #fff;
  --tracking-ink: var(--ink);
  --tracking-muted: var(--muted);
  --tracking-border: var(--line);
}
:root[data-theme=dark] {
  --paper: #1b1e23;
  --ink: #f5f5f4;
  --muted: #bcc1ca;
  --line: #ffffff26;
  --soft: #23272e;
  --accent: #ff9363;
  --intro-surface: var(--paper);
  --tracking-card: #303238;
  --tracking-surface: #26292d;
  --tracking-ink: var(--ink);
  --tracking-muted: var(--muted);
  --tracking-border: var(--line);
}
::selection { background: #ffd8c4; color: #25211e; }
.provider-hero .provider-pill[data-provider] {
  --provider-accent: var(--accent);
}

/* The benchmark uses the same cool neutral surfaces and rounded controls. */
.results { background: #f2f5f6; }
html[data-theme=dark] .results { background: #22272c; }
.results .chart-toolbar h3 { font-family: var(--body); font-weight: 450; letter-spacing: -.035em; }
.results .metric-toggle { border-radius: 100px; background: color-mix(in srgb, var(--paper) 80%, transparent); }
.results .metric-toggle button { border-radius: 100px; }
.results .chart-legend i { border-radius: 50%; }
.results .chart-bar { background: #6b7882; opacity: 1; border-radius: 3px; }
.results .is-hydra .chart-bar { background: var(--orange); }
.results .is-hydra .chart-name { font-weight: 550; }
.results .chart-ci { border: 0; background: var(--ink); box-shadow: 0 0 0 1px var(--paper); }
.results .chart-ci:before, .results .chart-ci:after { width: 1.5px; height: 8px; top: -3px; }
html[data-theme=dark] .results .chart-bar { background: #8d9ba5; }
html[data-theme=dark] .results .is-hydra .chart-bar { background: var(--orange); }

/* Product and access styles follow the copied publication source in their own sheets. */
main h2:not(.endcap-brand) { font-weight: 450; letter-spacing: -.055em; }

/* Keep the API example flat, with the existing dark neutral finish. */
.metric-toggle { border-radius: 6px; }
.metric-toggle button { border-radius: 3px; }
.developers { background: #17191e; }
.code-stage { perspective: none; }
.code-stage::before { display: none; }
.code-window, .code-window:hover, .code-window:focus-within {
  transform: none;
  border-color: #535760;
  border-radius: 11px;
  background: #292d33;
  box-shadow: inset 0 1px 0 #ffffff12;
}
.code-top { background: #33373f; border-color: #ffffff16; }
.code-bottom { background: #25292f; border-color: #ffffff16; }
.code-tabs button[aria-pressed=true] { border-color: #ffad86; }
.code-string, .code-window [data-active-profile] { color: #ffbf9b; }
.routing-insights .tracking-area { fill: #ed591f16; }
.endcap .endcap-brand { color: var(--ink); }
.endcap-brand svg { color: var(--accent); }

/* Matching content roles share a type scale; the opening wordmark stays independent. */
:root {
  --section-title-size: clamp(42px, 4.55vw, 66px);
  --section-subtitle-size: 22px;
  --content-text-size: 16px;
  --content-meta-size: 12px;
}
#results-heading, #developer-heading, #tracking-heading {
  font-size: var(--section-title-size);
  line-height: 1.1;
}
.results .chart-toolbar h3, .savings-context h3,
.routing-insights .tracking-card > h3 {
  font-size: var(--section-subtitle-size);
  line-height: 1.3;
}
.developer-intro, .routing-insights .tracking-card > p {
  font-size: var(--content-text-size);
  line-height: 1.7;
}
.section .eyebrow { font-size: var(--content-meta-size); line-height: 1.65; }
@media (max-width: 1000px) { :root { --section-subtitle-size: 21px; } }
@media (max-width: 700px) {
  :root { --section-title-size: 46px; --section-subtitle-size: 20px; }
}