/* ============================================================================
   Hermoso developer docs — stylesheet
   ----------------------------------------------------------------------------
   WHY THIS IS NOT A LINK TO THE MARKETING BUNDLE. The site's stylesheet is
   CONTENT-FINGERPRINTED (site.v17.<sha8>.css) precisely so that editing it
   changes its URL — which means any filename hard-coded here breaks on the
   next restyle, and a restyle was in flight when these docs were written.
   So the design TOKENS below are a copy of that bundle's `:root`, taken from
   site/assets/site.v15.02ff82aa.css on the `marketing-site` branch, 2026-08-04
   ("v11 Daylight Atelier"). v15 deliberately, NOT v17: v17 is the homepage-only
   bundle, while v15 is what all 265 CONTENT pages use — /mcp/, /ai-agents/,
   pricing, the blog — and docs are content pages.
   Fonts are NOT re-shipped: the @font-face rules point at the site's own
   self-hosted /assets/fonts/*.woff2, which resolves because these pages are
   served from the same origin at /docs.
   If the site's palette moves, update the block below to match.

   The site is LIGHT-ONLY by design — `prefers-color-scheme` appears nowhere in
   site/, there is no data-theme attribute and no dark class. These pages match
   that rather than introducing a dark mode the rest of the site cannot honour.

   CSP: the site sends `default-src 'self'; font-src 'self' …`, so everything
   here is same-origin. No CDN, no external font host, no inline script.
   ========================================================================== */

@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('/assets/fonts/fraunces-latin.woff2') format('woff2'); }
@font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/hanken-latin.woff2') format('woff2'); }
@font-face{ font-family:'Fraunces Fallback'; src:local('Georgia');
  ascent-override:97.8%; descent-override:25.5%; line-gap-override:0%; size-adjust:107%; }

:root{
  --bg:#faf7f6; --bg-2:#f4eeeb; --surface:#ffffff; --surface-2:#fcf9f8; --surface-3:#f1ebe8;
  --line:rgba(26,23,21,.10); --line-2:rgba(26,23,21,.17); --hair:rgba(26,23,21,.05);
  --text:#1a1715; --muted:#57514f; --faint:#8a827e;
  --coral:#c8442a; --coral-solid:#db5238; --coral-deep:#a5371f; --cream:#fff6f2;
  --display:'Fraunces','Fraunces Fallback',Georgia,'Times New Roman',serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --r-sm:10px; --r:14px; --pill:999px;
  --el-1:0 1px 2px rgba(60,45,25,.05), 0 5px 16px -8px rgba(60,45,25,.10);
  --side:264px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:84px; background:var(--bg); }
body{ font-family:var(--body); background:var(--bg); color:var(--text); line-height:1.62;
  font-size:16px; -webkit-font-smoothing:antialiased; overflow-x:hidden; }

/* ── skip link + focus. Keyboard users must always be able to see where they are. ───────────────────────── */
.skip{ position:absolute; left:-9999px; top:0; z-index:99; background:var(--text); color:var(--cream);
  padding:.7rem 1.1rem; border-radius:0 0 var(--r-sm) 0; text-decoration:none; }
.skip:focus{ left:0; }
a:focus-visible,button:focus-visible{ outline:3px solid var(--coral); outline-offset:2px; border-radius:3px; }

/* ── top bar ────────────────────────────────────────────────────────────────────────────────────────────── */
.top{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.85rem clamp(1rem,4vw,2rem); background:rgba(250,249,247,.92);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
.brand{ display:flex; align-items:baseline; gap:.5rem; text-decoration:none; color:var(--text); }
.brand .wm{ font-family:var(--display); font-size:1.35rem; font-weight:600; letter-spacing:-.02em; }
.brand .dv{ font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted);
  border-left:1px solid var(--line-2); padding-left:.55rem; }
.tnav{ display:flex; align-items:center; gap:clamp(.6rem,2vw,1.4rem); flex-wrap:wrap; }
.tnav a{ color:var(--muted); text-decoration:none; font-size:.92rem; }
.tnav a:hover{ color:var(--text); }
/* MEASURED, not assumed: cream on --coral-solid is 3.74:1 at this size, which fails AA. --coral-deep is
   6.2:1 with the same cream. The marketing site uses the lighter fill on much larger buttons; a 14.7px
   pill needs the deeper one. */
.tnav .cta{ background:var(--coral-deep); color:var(--cream); padding:.45rem .95rem;
  border-radius:var(--pill); font-weight:600; }
.tnav .cta:hover{ background:#8e2f1a; color:var(--cream); }

/* ── shell: sidebar + main ──────────────────────────────────────────────────────────────────────────────── */
.shell{ display:grid; grid-template-columns:var(--side) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem);
  max-width:1240px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem) 4rem; align-items:start; }
.side{ position:sticky; top:74px; max-height:calc(100vh - 90px); overflow-y:auto;
  padding:1.8rem 0 2rem; font-size:.93rem; }
.nv-sec{ margin-bottom:1.5rem; }
.nv-h{ font-size:.7rem; text-transform:uppercase; letter-spacing:.13em; color:var(--muted);
  margin-bottom:.5rem; font-weight:700; }
.side ul{ list-style:none; }
.side li a{ display:block; padding:.3rem .6rem; margin-left:-.6rem; border-radius:var(--r-sm);
  color:var(--muted); text-decoration:none; }
.side li a:hover{ background:var(--surface-2); color:var(--text); }
.side li a[aria-current="page"]{ background:var(--surface); color:var(--text); font-weight:600;
  box-shadow:var(--el-1); }
main{ padding:2rem 0 1rem; min-width:0; }

/* ── type ───────────────────────────────────────────────────────────────────────────────────────────────── */
h1{ font-family:var(--display); font-weight:600; letter-spacing:-.025em; line-height:1.08;
  font-size:clamp(2rem,4.4vw,3rem); margin-bottom:.7rem; }
h2{ font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.18;
  font-size:clamp(1.4rem,2.6vw,1.85rem); margin:2.6rem 0 .8rem; }
h3{ font-size:1.06rem; font-weight:700; margin:1.6rem 0 .4rem; letter-spacing:-.01em; }
h4{ font-size:.95rem; font-weight:700; margin:1.2rem 0 .35rem; }
p,ul,ol,dl,table{ margin-bottom:1rem; }
main ul,main ol{ padding-left:1.25rem; }
main li{ margin-bottom:.35rem; }
a{ color:var(--coral); text-underline-offset:2px; }
a:hover{ color:var(--coral-deep); }
strong{ font-weight:700; }
.lede{ font-size:1.12rem; color:var(--muted); max-width:62ch; }
.meta{ font-size:.92rem; color:var(--muted); }
.fine{ font-size:.85rem; color:var(--muted); }
.none{ color:var(--muted); font-size:.9rem; font-style:italic; }
.crumb{ font-size:.85rem; color:var(--muted); margin-bottom:1rem; }
.crumb a{ color:var(--muted); text-decoration:none; }
.crumb a:hover{ color:var(--text); text-decoration:underline; }
.crumb i{ font-style:normal; padding:0 .45rem; }

/* ── code ───────────────────────────────────────────────────────────────────────────────────────────────── */
code{ font-family:var(--mono); font-size:.875em; background:var(--surface-3); padding:.12em .38em;
  border-radius:5px; overflow-wrap:break-word; }
/* A <code> inside a link inherits the link colour and sits on the code chip, not on the page — and --coral
   on --surface-3 measures 4.13:1, below AA. The deeper accent is 5.6:1 on that chip. This is the single
   commonest text pairing in the tool reference, so it is worth its own rule. */
a code{ color:var(--coral-deep); }
pre{ background:#17150f; color:#f4f1ea; padding:1rem 1.1rem; border-radius:var(--r);
  overflow-x:auto; margin-bottom:1.1rem; font-size:.86rem; line-height:1.6; }
pre code{ background:none; padding:0; color:inherit; font-size:1em; white-space:pre; }
kbd{ font-family:var(--mono); font-size:.8em; border:1px solid var(--line-2); border-bottom-width:2px;
  border-radius:5px; padding:.1em .4em; background:var(--surface); }

/* ── callouts ───────────────────────────────────────────────────────────────────────────────────────────── */
.callout{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--coral-solid);
  border-radius:var(--r); padding:1rem 1.15rem; margin:1.3rem 0; box-shadow:var(--el-1); }
.callout p:last-child{ margin-bottom:0; }
.note{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
  padding:.9rem 1.1rem; margin:1.2rem 0; font-size:.94rem; }
.note p:last-child{ margin-bottom:0; }
.rules li{ margin-bottom:.7rem; }

/* ── tables ─────────────────────────────────────────────────────────────────────────────────────────────── */
/* Wide content scrolls INSIDE its own container; the page body never scrolls sideways. */
.tw{ overflow-x:auto; margin-bottom:1rem; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); }
table{ border-collapse:collapse; width:100%; font-size:.9rem; }
th,td{ text-align:left; padding:.55rem .8rem; border-bottom:1px solid var(--hair); vertical-align:top; }
th{ font-size:.74rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted);
  background:var(--surface-2); font-weight:700; white-space:nowrap; }
tbody tr:last-child td{ border-bottom:none; }
.params td:first-child{ white-space:nowrap; }
.params .ty code{ color:var(--muted); }
.req{ display:inline-block; margin-left:.45rem; font-size:.64rem; text-transform:uppercase;
  letter-spacing:.07em; color:var(--coral-deep); font-weight:700; vertical-align:middle; }

/* ── tool cards ─────────────────────────────────────────────────────────────────────────────────────────── */
.sec{ margin-top:2.4rem; }
.tool{ border-top:1px solid var(--line); padding-top:1.3rem; margin-top:1.3rem; }
.tool h3{ margin:0 0 .2rem; font-size:1.02rem; }
.tool h3 code{ background:none; padding:0; font-size:1rem; font-weight:700; }
.tool .tt{ font-size:.93rem; font-weight:600; margin-bottom:.35rem; }
.tool .td{ color:var(--muted); font-size:.93rem; max-width:74ch; }
.anchor{ margin-left:.5rem; color:var(--muted); text-decoration:none; opacity:0; font-weight:400; }
.tool:hover .anchor,.anchor:focus{ opacity:1; }
.tag{ display:inline-block; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em;
  padding:.12em .45em; border-radius:var(--pill); vertical-align:middle; font-weight:700; }
.tag.ro{ background:var(--surface-3); color:var(--muted); }
.tag.de{ background:#fbeae7; color:var(--coral-deep); }
.tag.ga{ background:#fbf1de; color:#7a5a1c; }

/* ── toc + grids ────────────────────────────────────────────────────────────────────────────────────────── */
.toc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1rem 1.15rem; margin:1.4rem 0; box-shadow:var(--el-1); }
.toc h2{ font-family:var(--body); font-size:.72rem; text-transform:uppercase; letter-spacing:.13em;
  color:var(--muted); margin:0 0 .5rem; font-weight:700; }
.toc ul{ list-style:none; padding:0; columns:2; column-gap:1.6rem; }
.toc li{ break-inside:avoid; margin-bottom:.22rem; font-size:.9rem; }
.toc .n{ color:var(--muted); font-size:.8rem; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin:1.4rem 0; }
.gcard{ display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.1rem 1.2rem; text-decoration:none; color:var(--text); box-shadow:var(--el-1); }
.gcard:hover{ border-color:var(--line-2); }
.gcard h3{ margin:0 0 .3rem; font-size:1rem; }
.gcard p{ color:var(--muted); font-size:.88rem; margin-bottom:.5rem; }
.gcard .n{ font-size:.76rem; text-transform:uppercase; letter-spacing:.09em; color:var(--coral-deep);
  font-weight:700; }
.alltools{ list-style:none; padding:0; columns:2; column-gap:2rem; font-size:.88rem; }
.alltools li{ break-inside:avoid; margin-bottom:.3rem; }
.alltools span{ color:var(--muted); }
.alltools a{ text-decoration:none; }
.alltools a:hover code{ background:var(--surface-2); }

/* ── connectors ─────────────────────────────────────────────────────────────────────────────────────────── */
.conn{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.1rem 1.25rem; margin-bottom:1rem; box-shadow:var(--el-1); }
.conn h3{ margin:0 0 .35rem; }
.conn .td{ color:var(--muted); font-size:.94rem; max-width:72ch; }
.caps{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.6rem 0 .2rem; }
.caps span{ font-size:.74rem; background:var(--surface-3); color:var(--muted); padding:.16em .55em;
  border-radius:var(--pill); }
.kv{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:.2rem .9rem; margin:.8rem 0 0;
  font-size:.88rem; }
.kv dt{ color:var(--muted); text-transform:uppercase; font-size:.68rem; letter-spacing:.09em;
  padding-top:.28em; font-weight:700; }
.kv dd{ color:var(--muted); }
.gate{ margin-top:.85rem; padding:.75rem .95rem; background:#fbf7ee; border:1px solid #e8dcc0;
  border-radius:var(--r-sm); font-size:.9rem; }
.gate p:last-child{ margin-bottom:0; }

/* ── footer ─────────────────────────────────────────────────────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); padding:2rem clamp(1rem,4vw,2rem) 3rem; background:var(--bg-2); }
.foot p{ max-width:80ch; margin:0 auto .6rem; font-size:.9rem; color:var(--muted); }
.foot p:first-child{ text-align:center; }
/* --coral is documented AA on WHITE (4.87:1); on the footer's --bg-2 wash it drops to 4.24 and fails.
   Measured — the deeper accent is 5.8:1 there. */
.foot a{ color:var(--coral-deep); }

/* ── responsive. The sidebar becomes a horizontal rail; nothing ever scrolls the page sideways. ──────────── */
@media (max-width:900px){
  .shell{ grid-template-columns:minmax(0,1fr); gap:0; }
  .side{ position:static; max-height:none; overflow:visible; padding:1.2rem 0 .5rem;
    border-bottom:1px solid var(--line); }
  .nv-sec{ margin-bottom:.9rem; }
  .side ul{ display:flex; flex-wrap:wrap; gap:.25rem .1rem; }
  .side li a{ margin-left:0; padding:.25rem .55rem; }
  .toc ul,.alltools{ columns:1; }
}
@media (max-width:520px){
  body{ font-size:15.5px; }
  .brand .dv{ display:none; }
  .tnav a:not(.cta){ display:none; }
  .kv{ grid-template-columns:minmax(0,1fr); gap:0 0; }
  .kv dt{ padding-top:.6em; }
}

/* ── motion. Nothing here animates layout, but honour the preference for the sticky/blur chrome too. ─────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .top{ backdrop-filter:none; background:var(--bg); }
}

@media print{
  .top,.side,.foot,.toc{ display:none; }
  .shell{ display:block; }
  pre{ background:none; color:#000; border:1px solid #999; }
}