/* site-tokens.css: furoki.com's typography and text-colour tokens. The only file in css/ allowed to hold raw
   px sizes, line-heights or colour literals (npm run check:tokens enforces this). Loaded after the brand files and
   before css/site.css. The blog and the main site share these tokens, so body text is the same everywhere.
   Docs: docs/design-tokens.md (what each token is for, the matching .t-* classes, and how to add a page).
   Brand colours (#292929 ink, sand, accents) stay in brand/furoki-tokens.css; this file only names roles for them. */
:root {
  /* type scale: one body size for every reading surface, phones included */
  --type-micro: 13px;                                  /* mock UI inside the landscape scenes (glass panels) only */
  --type-caption: 14px;                                /* captions, footnotes, legal line, contents list, small buttons */
  --type-small: 15px;                                  /* UI and meta: nav, buttons, eyebrows, dates, labels, footer links */
  --type-ui: 16px;                                     /* large buttons, table cells, the author name */
  --type-body: 18px;                                   /* body and paragraph text, everywhere */
  --type-quote: 20px;                                  /* pull quotes, h4-level subheads, the avatar letter */
  --type-lead: clamp(20px, .5vw + 17px, 24px);         /* lead/intro: a post's dek, a hero's sub line */
  --type-h4: 20px;                                     /* card and cell titles, FAQ questions */
  --type-h3: clamp(21px, .8vw + 15px, 26px);           /* subsection heads */
  --type-card: 22px;                                   /* Keep reading card titles */
  --type-h2: clamp(26px, 1.25vw + 18px, 34px);         /* section heads inside a post or page column */
  --type-title-sm: clamp(22px, .5vw + 18px, 26px);     /* compact list titles */
  --type-title: clamp(30px, 1.1vw + 22px, 38px);       /* blog list titles, homepage section heads */
  --type-feature: clamp(32px, 1.2vw + 23px, 38px);     /* the featured post title */
  --type-section: clamp(30px, 1.6vw + 20px, 40px);    /* homepage and landing-page section heads */
  --type-h1-compact: clamp(32px, 2vw + 20px, 44px);    /* h1 on tools, legal and 404 pages */
  --type-h1: clamp(38px, 2.8vw + 20px, 56px);          /* page and post headlines, the homepage hero */
  --type-art: clamp(36px, 4vw, 56px);                  /* big word on a brand panel */
  --type-metric: 30px;                                 /* a single large number */

  /* line heights (unitless, so they scale with the size) */
  --leading-tight: 1.12;    /* display headlines */
  --leading-heading: 1.25;  /* h1/h2, list titles */
  --leading-snug: 1.36;     /* h3/h4, card titles */
  --leading-lead: 1.45;     /* lead text */
  --leading-ui: 1.5;        /* captions, table cells */
  --leading-small: 1.6;     /* UI/meta text (15px -> 24px) */
  --leading-body: 1.56;     /* body text (18px -> 28px) */

  /* letter spacing */
  --tracking-display: -.015em;
  --tracking-tight: -.01em;
  --tracking-label: .06em;

  /* measure: the width text runs to */
  --measure-body: 736px;    /* post and page body column (~70 characters at 18px) */
  --measure-page: 760px;    /* tools, legal and FAQ columns */
  --measure-text: 640px;    /* a paragraph beside other content (cells, split sections) */
  --measure-dek: 600px;     /* a list dek */
  --measure-note: 420px;    /* the short note set beside a headline */

  /* text colours (roles; values come from brand/furoki-tokens.css) */
  --text-body: var(--text-strong);         /* #292929 ink on sand, 12.9:1: body, lead and headings */
  --text-meta: var(--sand-subtle);         /* #6c6a66 on sand, 4.8:1: dates, captions, labels, footer small print */
  --text-on-dark: var(--on-gfx);           /* white on gradient panels and dark glass */
  --text-on-dark-muted: rgba(255, 255, 255, .85);
  --text-on-glass-muted: rgba(255, 255, 255, .92);  /* secondary text on the dark glass panels (was .72, 4.0:1 measured on the brightest scene; now 4.5:1+) */
  --line-on-dark: rgba(255, 255, 255, .35);
  --line-on-dark-strong: rgba(255, 255, 255, .55);
  --shadow-glass: 0 10px 30px rgba(0, 0, 0, .18);
  --shadow-raised: 0 2px 6px rgba(0, 0, 0, .04);
}