/* ============================================================
   Tokens for the connected toolkit.

   Headers: Boldonse, loaded from Google Fonts, in the three
   supplied colours assigned by level. Boldonse ships a single
   weight (400), so header rules ask for 400 rather than 700 —
   asking for bold would only get a synthetic one.

   Everything else is taken from the supplied screenshots.
   ============================================================ */
:root{
  /* --- header colours (headers only) --- */
  --h-title:#FDCB41;     /* page titles — 1 per page, largest type      */
  --h-section:#168F62;   /* section headings — repeated, best contrast  */
  --h-figure:#FB7AB1;    /* figure and diagram titles                   */

  /* --- everything else, as shown in the screenshots --- */
  --ink:#000000;
  --page:#FFFFFF;
  --hair:#000000;        /* rules and dashed borders are black          */
  --muted:#5A5A5A;
  --aside:#3C3C3C;
  /* --- type --- */
  --f-head:'Boldonse','Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-body:'Albert Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --t-title:56px;   --t-title-lh:1.16; --t-title-ls:-.01em;
  --t-section:30px; --t-section-lh:1.3; --t-section-ls:0;
  --t-figure:24px;  --t-body:19px;     --t-body-lh:1.65; --t-body-ls:-.1px;
  --t-sub:22px;     --t-aside:13px;   --t-small:15px;

  /* --- layout, from the 1548-wide frames --- */
  --content-w:none;          /* full-bleed: the page uses the whole screen */
  --pad:clamp(24px,4vw,88px);
  --col-left:413;
  --col-right:775;
  --col-gap:40px;
  --measure-left:min(44ch,100%);   /* keeps prose readable at any width */
  --measure-right:min(72ch,100%);

  --sp-4:4px;  --sp-8:8px;   --sp-16:16px; --sp-24:24px;
  --sp-40:40px; --sp-64:64px; --sp-100:100px;

  --box-w:402px;
  --box-pad:24px 16px;
  --connector:32px;
  --callout-w:855px;
  --callout-pad:40px;
  --dash:4px;
  --hairline:1px;
  --radius:14px;        /* the rounded cards on the intro pages */
}