/* pages/guide/skin-playful.css — the shared public-page shell in the playful
   voice (ADR 0015).

   It lives beside guide/base.css because that is the sheet that owns
   `.introbody`, the shell every public DOCUMENT page stands on: the community
   page, the four legal pages, and the generated reference pages. Putting it in
   legal/ would have put it out of community's reach.

   `.introbody` is the guide's own former body class, orphaned when the guide
   moved to `shellui codexpage` in the Codex rewrite (#226). The playful
   rollout was a PR series, one surface at a time, and this shell was never on
   the list — so it kept the pre-playful ember palette while every other
   learner-facing page converted. The result was not merely "unconverted": the
   header panel, the lantern and the account menu read --play-* tokens
   unscoped, so these pages rendered a chunky warm-paper panel on a cold ember
   document in the system sans. Reported as "why don't Privacy, Terms, Refund,
   Contact follow the same fonts and background as the website".

   Same two levers as landing/skin-playful.css, planner/skin-playful.css and
   trainer/skin-playful-shell.css, and loaded last for the same reason:
   1. Token remap — the shell and component sheets read --bg/--panel/--ink/…,
      so point those at the --play-* group for this body class only. Every
      value is a var() reference; no literal colours (decision 0008).
   2. The one display voice, on the body, with --display following it so the
      wordmark and every kit label come along (0015, closed 2026-09-03).

   What it deliberately does NOT do: touch layout. These pages scroll as
   documents — guide/base.css releases the height cap that `.shellui` imposes,
   and nothing here reintroduces it. */

body.introbody{
  --bg:var(--play-bg); --panel:var(--play-card); --panel2:var(--play-paper);
  --card:var(--play-card); --line:var(--play-track); --line2:var(--play-soft);
  --ink:var(--play-ink); --dim:var(--play-mute); --mute:var(--play-mute);
  --accent:var(--play-accent); --accent2:var(--play-link);
  --accent-soft:var(--play-accent-soft); --accent-deep:var(--play-link);
  --hover:var(--play-paper); --cell:var(--play-paper);
  --shadow1:transparent; --shadow2:transparent; --shimmer:transparent;
  --display:var(--play-display);
  font-family:var(--play-display);
}
body.introbody{background:var(--play-bg)}

/* The header line is 2px in every playful shell. */
body.introbody .ihead{border-bottom-width:2px}

/* The nav CTA. button.css and guide/base.css both hardcode #fff, which is
   2.80:1 on the ember — the contrast regression ADR 0015 §2 already names.
   The trainer skin's equivalent rule excludes `.btn.sm` and this CTA IS
   `.btn.sm`, so the selector has to say so. */
body.introbody .ilinks a.btn{
  background:var(--play-accent);color:var(--play-accent-ink);
  border:2px solid var(--play-ink);border-radius:14px;
  box-shadow:0 4px 0 var(--play-edge);
}
body.introbody .ilinks a.btn:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)}
body.introbody .ilinks a.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--play-edge)}
body.introbody .ilinks a.btn:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}