/* Semantic tokens — typography, salamcendekia-blog
 *
 * Components reference THESE, never `--type-*`. The rule is the one AGENTS.md
 * sets for colour: a component reaching for `--type-prose` is the same defect
 * as one reaching for `--blue-500`. Both hard-code a value where they meant a
 * relationship.
 *
 * `checks/literals.py` cannot catch that, because a primitive is still a
 * token. Review of #49 found 50 primitive uses against 5 semantic ones after
 * exactly this omission — the values were tokenised and the tier was skipped.
 * This file exists so a component in #89 has a compliant name to reach for.
 *
 * THE NAMES ARE ROLES ON A READING SURFACE, not sizes. `--text-article-body`
 * says what the token is for; `--type-prose` says only how big it is, and a
 * component that names a size cannot be restyled without editing the
 * component.
 *
 * SIZE AND LEADING ARE PAIRED throughout, the same rule the primitives state:
 * a size adopted without its leading is the most common way a type scale
 * stops being one.
 */

:root {
  /* Families */
  --text-family-heading: var(--font-primary);
  --text-family-body: var(--font-secondary);

  /* The article body. Everything else on the page is calibrated against it. */
  --text-article-body: var(--type-prose);
  --text-article-body-leading: var(--type-prose-leading);
  --text-article-body-weight: var(--type-weight-regular);

  /* The opening paragraph.
     THE WEIGHT IS NOT OPTIONAL, and it is a token so that it cannot be
     forgotten. --type-lead is 22px, and WCAG's large-text exception needs
     >=24px regular OR >=18.66px bold. 22px REGULAR clears neither, so a lead
     paragraph set in --color-large-text-subtle at the default weight would
     measure 3.48:1 and fail both AA and the exception it appears to claim.
     At semibold it qualifies as large text and 3.0 applies.
     Raised in review of #92: the rename put the constraint in the colour's
     name, and the one size that name licensed could not actually carry it.
     A convention only works when it is complete. */
  --text-article-lead: var(--type-lead);
  --text-article-lead-leading: var(--type-lead-leading);
  --text-article-lead-weight: var(--type-weight-semibold);

  /* Headings inside an article. --text-article-h3 is deliberately close to the
     body size: a subheading should read as structure, not as an announcement. */
  --text-article-title: var(--type-h1);
  --text-article-title-leading: var(--type-h1-leading);
  --text-article-h2: var(--type-h2);
  --text-article-h2-leading: var(--type-h2-leading);
  --text-article-h3: var(--type-h3);
  --text-article-h3-leading: var(--type-h3-leading);
  --text-heading-weight: var(--type-weight-extrabold);

  /* Around the article: byline, date, figure captions. */
  --text-meta: var(--type-caption);
  --text-meta-leading: var(--type-caption-leading);

  /* Site chrome — header links, footer, post-card metadata. Distinct from
     --text-meta because chrome is navigational and captions are editorial;
     they happen to share a size today and need not tomorrow. */
  --text-chrome: var(--type-small);
  --text-chrome-leading: var(--type-small-leading);
  --text-chrome-weight: var(--type-weight-semibold);

  /* An index page masthead. The only place --type-display is licensed. */
  --text-masthead: var(--type-display);
  --text-masthead-leading: var(--type-display-leading);

  /* The measure an article body is constrained to. A token because the
     container and anything that breaks out of it — a pull quote, a full-width
     figure — must agree on the same number. */
  --text-measure: var(--type-measure);
  /* A NARROWER MEASURE, for centred copy inside a contained block.
     ADDED WITH THE CTA BAND'S SUPPORTING LINE, and it is the case this file's
     README names: a component reached for a value and no role fit.
     `--text-measure` is the ARTICLE's measure at 68ch -- correct for a
     left-aligned column of running text, too wide for a centred line, because
     centred text is harder to track back to the next line and so wants fewer
     characters rather than the same number.
     IN `ch` FOR THE REASON `--type-measure` IS: a measure is a count of
     characters, and expressing it in the font's own units keeps it a measure
     when the type scale moves. A pixel figure would be a width that happened
     to be right at one size. */
  --text-measure-tight: 44ch;
}