/* ==========================================================================
   VATMesh — TONE MODES
   --------------------------------------------------------------------------
   One token set, three applications. This file never introduces a new
   colour: it re-applies the tokens of site.css.

   HOW A TONE IS SELECTED
     The tone lives on <body>, as a data attribute or as an equivalent class:

       <body data-tone="corporate">   ... or <body class="tone-corporate">
       <body data-tone="funky">       ... or <body class="tone-funky">
       <body data-tone="serious">     ... or <body class="tone-serious">

     A page with no tone attribute and no tone class is CORPORATE — the
     base layer in site.css is written in the corporate voice, so a marketing
     page needs no attribute at all.

   NOTE: the theme (light / dark) is a different axis and lives on <html>
   as data-theme="dark" | "light". The two never interact: every tone is
   legible in both themes because the tones only touch typography, spacing
   and accent *usage*, never the palette itself.
   ========================================================================== */

/* ==========================================================================
   1. CORPORATE — home, corridors, country landings, pricing, legal
   --------------------------------------------------------------------------
   Ivory ground. One navy section per page, maximum. Teal is the only
   accent: links, the active nav item, the focus ring, the primary button.
   Serif display over sans body over mono. 12-column grid at --container.
   96px between sections on desktop. Motion: 180ms fades and 2px lifts.
   ========================================================================== */

body[data-tone="corporate"],
body.tone-corporate {
  --section-gap: var(--sp-9);        /* 96px */
  --accent: var(--teal);             /* the only accent on a corporate page */
  --accent-text: var(--teal-900);
  --display-weight: 600;
}

body[data-tone="corporate"] h1,
body.tone-corporate h1 { font-weight: var(--display-weight); }

/* The 12-column grid the corporate pages are drawn on. */
body[data-tone="corporate"] .grid--12,
body.tone-corporate .grid--12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-6);
}
body[data-tone="corporate"] .span-3,
body.tone-corporate .span-3 { grid-column: span 3; }
body[data-tone="corporate"] .span-4,
body.tone-corporate .span-4 { grid-column: span 4; }
body[data-tone="corporate"] .span-6,
body.tone-corporate .span-6 { grid-column: span 6; }
body[data-tone="corporate"] .span-8,
body.tone-corporate .span-8 { grid-column: span 8; }
body[data-tone="corporate"] .span-12,
body.tone-corporate .span-12 { grid-column: span 12; }

@media (max-width: 900px) {
  body[data-tone="corporate"] .grid--12,
  body.tone-corporate .grid--12 { grid-template-columns: 1fr; }
  body[data-tone="corporate"] .span-3,
  body[data-tone="corporate"] .span-4,
  body[data-tone="corporate"] .span-6,
  body[data-tone="corporate"] .span-8,
  body.tone-corporate .span-3,
  body.tone-corporate .span-4,
  body.tone-corporate .span-6,
  body.tone-corporate .span-8 { grid-column: 1 / -1; }
}

/* Corporate motion: fades and 2px lifts, nothing else. */
body[data-tone="corporate"] .btn:hover,
body.tone-corporate .btn:hover { transform: translateY(-2px); }
body[data-tone="corporate"] .card--interactive:hover,
body.tone-corporate .card--interactive:hover { transform: translateY(-2px); }

/* The 3D corridor is a progressive enhancement. On a corporate page the
   static poster is the default and the WebGL stage only appears once the
   script has marked the section ready. */
body[data-tone="corporate"] .corridor-3d__stage,
body.tone-corporate .corridor-3d__stage { display: none; }
body[data-tone="corporate"] .corridor-3d[data-webgl="ready"] .corridor-3d__stage,
body.tone-corporate .corridor-3d[data-webgl="ready"] .corridor-3d__stage { display: block; }

@media (prefers-reduced-motion: reduce) {
  body[data-tone="corporate"] .corridor-3d[data-webgl="ready"] .corridor-3d__stage,
  body.tone-corporate .corridor-3d[data-webgl="ready"] .corridor-3d__stage { display: none; }
  body[data-tone="corporate"] .corridor-3d[data-webgl="ready"] .corridor-3d__fallback,
  body.tone-corporate .corridor-3d[data-webgl="ready"] .corridor-3d__fallback { display: block; }
}

/* ==========================================================================
   2. FUNKY — the blog
   --------------------------------------------------------------------------
   Same tokens, bolder voice. Teal and gold, plus one pop colour used as a
   highlighter and never as an error. Illustration-led headers, real
   pull-quotes, larger card titles. Micro-interactions: a 2px lift, a gold
   underline that draws in, an illustration that shifts 4px on hover.
   Readability is the floor: 68ch measure, strong contrast, styled code.
   Nothing bounces.
   ========================================================================== */

body[data-tone="funky"],
body.tone-funky {
  --section-gap: var(--sp-9);
  --accent: var(--teal);
  --accent-text: var(--teal-900);
  --pop: var(--danger);            /* the one pop colour — highlighter only */
  --display-weight: 700;
  --fs-display: clamp(2.9rem, 6vw, 4.6rem);
  --fs-h1: clamp(2.1rem, 3.4vw, 3rem);
}

body[data-tone="funky"],
body.tone-funky {
  background: var(--paper);
}

body[data-tone="funky"] h1,
body.tone-funky h1 { font-weight: var(--display-weight); letter-spacing: -.025em; }

/* Illustration-led header */
body[data-tone="funky"] .post-header,
body.tone-funky .post-header {
  position: relative;
  padding-block: var(--sp-8) var(--sp-7);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
body[data-tone="funky"] .post-header__art,
body.tone-funky .post-header__art {
  display: block;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  transition: transform var(--dur-base) var(--ease);
}
body[data-tone="funky"] .post-header:hover .post-header__art,
body.tone-funky .post-header:hover .post-header__art { transform: translateX(4px); }
html[dir="rtl"] body[data-tone="funky"] .post-header:hover .post-header__art,
html[dir="rtl"] body.tone-funky .post-header:hover .post-header__art { transform: translateX(-4px); }

body[data-tone="funky"] .post-meta,
body.tone-funky .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body[data-tone="funky"] .post-meta .dot,
body.tone-funky .post-meta .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

/* Cards: larger titles, a 2px lift, a gold underline that draws in. */
body[data-tone="funky"] .card h3,
body.tone-funky .card h3 { font-size: 1.35rem; line-height: 1.25; }

body[data-tone="funky"] .post-card__title a,
body.tone-funky .post-card__title a {
  position: relative;
  color: var(--heading);
  text-decoration: none;
}
body[data-tone="funky"] .post-card__title a::after,
body.tone-funky .post-card__title a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -3px;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
body[data-tone="funky"] .post-card__title a:hover::after,
body[data-tone="funky"] .post-card__title a:focus-visible::after,
body.tone-funky .post-card__title a:hover::after,
body.tone-funky .post-card__title a:focus-visible::after { transform: scaleX(1); }
html[dir="rtl"] body[data-tone="funky"] .post-card__title a::after,
html[dir="rtl"] body.tone-funky .post-card__title a::after { transform-origin: right; }

/* The illustration on a card shifts 4px — it never bounces. */
body[data-tone="funky"] .post-card__art,
body.tone-funky .post-card__art {
  display: block;
  width: 100%;
  transition: transform var(--dur-base) var(--ease);
}
body[data-tone="funky"] .post-card:hover .post-card__art,
body.tone-funky .post-card:hover .post-card__art { transform: translateX(4px); }
html[dir="rtl"] body[data-tone="funky"] .post-card:hover .post-card__art,
html[dir="rtl"] body.tone-funky .post-card:hover .post-card__art { transform: translateX(-4px); }

body[data-tone="funky"] .post-card:hover,
body.tone-funky .post-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* The highlighter: the pop colour, used as ink and never as an error. */
.highlight {
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--pop) 22%, transparent) 58%);
  padding-inline: 2px;
}

/* Pull-quote: bigger than the corporate one, and it is the voice. */
body[data-tone="funky"] .pull-quote,
body.tone-funky .pull-quote {
  margin-block: var(--sp-8);
  padding-inline-start: var(--sp-6);
  border-inline-start: 4px solid var(--gold);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.32;
}

/* Readability floor. */
body[data-tone="funky"] .prose,
body.tone-funky .prose {
  max-width: var(--measure-prose);
  font-size: 1.0625rem;
  line-height: 1.78;
}
body[data-tone="funky"] .prose h2,
body.tone-funky .prose h2 { letter-spacing: -.02em; }

/* ==========================================================================
   3. SERIOUS — docs, API reference, MCP guide, app shell
   --------------------------------------------------------------------------
   Sober, dense but scannable, utilitarian. Monochrome-leaning: functional
   colour only — status, warning, deprecation. Persistent 240px left
   sidebar, in-page TOC 200px on the right at >=1200px, content column
   centred at 76ch. Monospace for every endpoint, schema name and error
   code. Zero decorative animation.
   ========================================================================== */

body[data-tone="serious"],
body.tone-serious {
  --section-gap: var(--sp-8);
  --accent: var(--ink-2);
  --accent-text: var(--ink-2);
  --display-weight: 600;
  /* Zero animation: every duration token collapses. */
  --dur-fast: 0ms;
  --dur-base: 0ms;
  --dur-slow: 0ms;
  /* Density: Inter at 15px on 1.7. */
  --fs-body: .9375rem;
  --fs-lead: 1rem;
}

body[data-tone="serious"],
body.tone-serious {
  background: var(--paper);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.7;
}

/* Monochrome-leaning links: the ink, underlined. Colour is reserved for
   status, warnings and deprecations. */
body[data-tone="serious"] a,
body.tone-serious a {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body[data-tone="serious"] a:hover,
body.tone-serious a:hover { color: var(--heading); }

/* Functional colour only. */
body[data-tone="serious"] .badge--ok,
body.tone-serious .badge--ok { color: var(--success); }
body[data-tone="serious"] .badge--warn,
body.tone-serious .badge--warn { color: var(--warn-ink); }
body[data-tone="serious"] .badge--err,
body.tone-serious .badge--err { color: var(--danger); }

body[data-tone="serious"] .callout--info,
body.tone-serious .callout--info { border-inline-start-color: var(--muted); background: var(--surface); border-color: var(--line); }
body[data-tone="serious"] .callout--warning,
body.tone-serious .callout--warning { border-inline-start-color: var(--gold); }
body[data-tone="serious"] .callout--danger,
body.tone-serious .callout--danger { border-inline-start-color: var(--danger); }
body[data-tone="serious"] .callout--success,
body.tone-serious .callout--success { border-inline-start-color: var(--success); }

/* Monospace everywhere it matters. */
body[data-tone="serious"] code,
body.tone-serious code,
body[data-tone="serious"] .endpoint,
body.tone-serious .endpoint,
body[data-tone="serious"] .schema,
body.tone-serious .schema,
body[data-tone="serious"] .error-code,
body.tone-serious .error-code {
  font-family: var(--mono);
  unicode-bidi: isolate;
  direction: ltr;
}
body[data-tone="serious"] .endpoint,
body.tone-serious .endpoint {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: .8125rem;
  font-weight: 600;
}
body[data-tone="serious"] .error-code,
body.tone-serious .error-code {
  color: var(--danger);
  font-weight: 600;
}
body[data-tone="serious"] .schema,
body.tone-serious .schema { font-weight: 600; color: var(--heading); }

/* No decorative animation in the serious voice. */
body[data-tone="serious"] .btn:hover,
body.tone-serious .btn:hover,
body[data-tone="serious"] .btn:active,
body.tone-serious .btn:active,
body[data-tone="serious"] .card--interactive:hover,
body.tone-serious .card--interactive:hover,
body[data-tone="serious"] .link-arrow:hover svg,
body.tone-serious .link-arrow:hover svg { transform: none; }
body[data-tone="serious"] .site-nav a::after,
body.tone-serious .site-nav a::after { transition: none; }

/* ==========================================================================
   DOCS SHELL CHROME
   --------------------------------------------------------------------------
   The Serious-mode shell. The behaviour (TOC, copy buttons, anchored
   headings, sidebar toggle, search) lives in assets/docs.js — see the
   markup contract at the top of that file.

     <div class="doc-layout">
       <aside class="doc-sidebar" id="doc-sidebar"> … </aside>
       <article class="doc-content"> … h2 / h3 … </article>
       <nav class="doc-toc" aria-label="Table of contents"></nav>
     </div>
   ========================================================================== */

.doc-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
  width: min(100% - 48px, 1440px);
  margin-inline: auto;
  padding-block: var(--sp-7);
}
.doc-sidebar {
  position: sticky;
  inset-block-start: 96px;
  align-self: start;
  max-block-size: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline-end: var(--sp-4);
  border-inline-end: 1px solid var(--line);
  font-size: .875rem;
}
.doc-sidebar__title {
  margin-bottom: var(--sp-3);
  color: var(--muted);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.doc-sidebar ul { list-style: none; }
.doc-sidebar li { margin-bottom: 2px; }
.doc-sidebar a {
  display: block;
  padding: 5px 10px;
  border-radius: var(--radius);
  color: var(--ink-2);
  text-decoration: none;
  line-height: 1.4;
}
.doc-sidebar a:hover { background: var(--surface); color: var(--heading); }
.doc-sidebar a[aria-current="page"] {
  background: var(--surface);
  color: var(--heading);
  font-weight: 600;
}

.doc-content {
  width: 100%;
  max-width: 76ch;
  margin-inline: auto;
  min-inline-size: 0;
}
.doc-content h2,
.doc-content h3 { scroll-margin-top: 96px; }
.doc-content > :first-child { margin-top: 0; }

/* Anchored headings: the anchor is a real link, so it is keyboard
   reachable. It stays invisible until the heading is hovered or the link
   is focused. */
.doc-content .heading-anchor {
  margin-inline-start: .35em;
  color: var(--muted);
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.doc-content h2:hover .heading-anchor,
.doc-content h3:hover .heading-anchor,
.doc-content .heading-anchor:focus-visible { opacity: 1; }

/* The in-page TOC (built by docs.js). */
.doc-toc {
  display: none;
  position: sticky;
  inset-block-start: 96px;
  align-self: start;
  inline-size: 200px;
  max-block-size: calc(100vh - 120px);
  overflow-y: auto;
  font-size: .8125rem;
}
.doc-toc__title {
  margin-bottom: var(--sp-3);
  color: var(--muted);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.doc-toc ul { list-style: none; }
.doc-toc li { margin-bottom: 1px; }
.doc-toc a {
  display: block;
  padding: 4px 10px;
  border-inline-start: 2px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  line-height: 1.4;
}
.doc-toc a:hover { color: var(--heading); }
.doc-toc a[aria-current="true"] {
  border-inline-start-color: var(--teal);
  color: var(--heading);
  font-weight: 600;
}
.doc-toc__level-3 a { padding-inline-start: 22px; font-size: .75rem; }
.doc-toc__empty { color: var(--muted); font-size: .8125rem; }

/* The search box that filters the TOC. */
.doc-search { margin-bottom: var(--sp-4); }
.doc-search__input {
  inline-size: 100%;
  min-block-size: 44px;
  padding: 8px 12px;
  border: 1px solid var(--control-line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--heading);
  font-size: .875rem;
}
.doc-search__input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* The sidebar toggle — a real button, visible on small screens only. */
.doc-sidebar-toggle {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 44px;
  padding: 8px 14px;
  border: 1px solid var(--control-line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--heading);
  font-size: .875rem;
  font-weight: 600;
}

@media (min-width: 1200px) {
  .doc-layout { grid-template-columns: 240px minmax(0, 1fr) 200px; }
  .doc-toc { display: block; }
}

@media (max-width: 1023px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .doc-sidebar-toggle { display: inline-flex; }
  .doc-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 950;
    inline-size: min(84vw, 320px);
    max-block-size: none;
    padding: var(--sp-6);
    background: var(--paper);
    border-inline-end: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease);
  }
  html[dir="rtl"] .doc-sidebar { transform: translateX(100%); }
  .doc-sidebar.is-open { transform: translateX(0); }
  .doc-sidebar__close { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .doc-sidebar { transition: none; }
  .doc-content .heading-anchor { transition: none; }
}