/* Guide theme — the thin layer between the vendored Organic design system and
   the page components. It does three things and nothing else:

   1. adds the tokens Organic does not ship but this page needs (a mono face),
   2. gives the Latin-only brand faces a Japanese fallback stack, and
   3. carries the base element rules the source page kept in its <helmet>.

   Component classes live in guide.css. */

:root {
  /* Organic ships no mono token; the guide is mostly C++ so it needs one.
     JetBrains Mono is loaded next to Caprasimo/Figtree in index.html. */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Caprasimo and Figtree are Latin-only. Every heading and paragraph on this
     page is Japanese, so without an explicit fallback the text lands on
     whatever system-ui resolves to — which differs per OS. Naming the stack
     keeps the rendering the same everywhere while leaving the Latin runs
     (class names, UINTERFACE, …) on the brand faces. */
  --jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic",
        Meiryo, "Noto Sans JP", sans-serif;
  --font-heading: "Caprasimo", var(--jp), system-ui, sans-serif;
  --font-body: "Figtree", var(--jp), system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* The accent at full strength only clears 3:1 against the cream ground — fine
   for chrome, not for body copy — so links take the deep ramp step. */
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-600); }

::selection { background: var(--color-accent-200); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Buttons here are page components, not .btn — reset the UA styling once
   rather than in every rule that follows. */
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  margin: 0;
}

/* Inline code inside prose. The block listings are .code-* in guide.css. */
code {
  font-family: var(--font-mono);
  font-size: 0.93em;
}

.mono { font-family: var(--font-mono); }