/*
 * JDS Typography Tokens — generated from the live Figma variables + text styles.
 * Exported 2026-07-18 via docs/scripts/export-design-tokens.js (typography section).
 * Do NOT hand-edit values here without checking Figma first — regenerate instead
 * (same rule as the colour files; see docs/design-tokens/README.md).
 *
 * Three layers. Layer 1 MOVED OUT on 2026-09-14 to
 * judiciary-design-system/tokens/typography.css after every one of its 40
 * values was verified identical to Figma; this file keeps layers 2 and 3, which
 * are the ones a component reads, and every var() below resolves against that
 * file. `paragraph-spacing` went to tokens/spacing.css, beside its Figma
 * siblings `spacer` and `list-spacing`.
 *
 *   1. Primitives         — `Primitive` collection (single Value mode).
 *      NO LONGER HERE — see tokens/typography.css.
 *   2. Responsive aliases — `Responsive` collection (Desktop / Tablet / Mobile modes);
 *      Desktop is emitted as the :root default, Tablet/Mobile as DATA blocks below —
 *      how they wire to breakpoints (media queries vs classes) is an engineering
 *      decision, deliberately not made here (same spirit as the missing layer-3
 *      utility file in README.md).
 *   3. Composed styles    — the 34 Figma text styles as classes, named 1:1
 *      (Figma "display/lg-bold" → .jds-display-lg-bold). All 34 styles are fully
 *      variable-bound in Figma; these classes compose the same variables.
 *
 * JDS deviations captured here (fork-decisions.md → Deviation 2):
 *   - No Light (300) styles exist — JDS deleted all 10 (44→34). The primitive
 *     `--jds-font-weight-light` still exists as a VARIABLE in Figma, so it is
 *     exported for fidelity, but no style uses it. Do not build UI with it.
 *   - label lg/md line-heights are tightened vs the SGDS defaults
 *     (label/lg → 24 (leading-xs), label/md → 20 (leading-2-xs)).
 *
 * `paragraph-spacing` has no direct CSS property — it is the space between
 * paragraphs (implement as margin between adjacent paragraphs). Each composed
 * class notes its value in a comment.
 */

/* ================================================================
   2. Responsive aliases (`Responsive` collection) — Desktop mode
   (the :root default; Tablet/Mobile data blocks follow)
   ================================================================ */
:root {
  /* ---- font-size roles ---- */
  --jds-font-size-display-lg: var(--jds-font-size-56);
  --jds-font-size-display-md: var(--jds-font-size-48);
  --jds-font-size-display-sm: var(--jds-font-size-40);
  --jds-font-size-heading-xl: var(--jds-font-size-40);
  --jds-font-size-heading-lg: var(--jds-font-size-32);
  --jds-font-size-heading-md: var(--jds-font-size-28);
  --jds-font-size-heading-sm: var(--jds-font-size-24);
  --jds-font-size-subtitle-md: var(--jds-font-size-20);
  --jds-font-size-subtitle-sm: var(--jds-font-size-16);
  --jds-font-size-body-lg: var(--jds-font-size-20);
  --jds-font-size-body-md: var(--jds-font-size-16);
  --jds-font-size-body-sm: var(--jds-font-size-14);
  --jds-font-size-label-lg: var(--jds-font-size-20);
  --jds-font-size-label-md: var(--jds-font-size-16);
  --jds-font-size-label-sm: var(--jds-font-size-14);
  --jds-font-size-label-xs: var(--jds-font-size-12);
  --jds-font-size-caption-md: var(--jds-font-size-14);
  --jds-font-size-overline-md: var(--jds-font-size-14);
  --jds-font-size-link-lg: var(--jds-font-size-20);
  --jds-font-size-link-md: var(--jds-font-size-16);
  --jds-font-size-link-sm: var(--jds-font-size-14);
  --jds-font-size-link-xs: var(--jds-font-size-12);
  --jds-font-size-list-lg: var(--jds-font-size-20);
  --jds-font-size-list-md: var(--jds-font-size-16);
  --jds-font-size-list-sm: var(--jds-font-size-14);

  /* ---- line-height roles ---- */
  --jds-line-height-3-xl: var(--jds-line-height-64);
  --jds-line-height-2-xl: var(--jds-line-height-56);
  --jds-line-height-xl: var(--jds-line-height-48);
  --jds-line-height-lg: var(--jds-line-height-40);
  --jds-line-height-md: var(--jds-line-height-32);
  --jds-line-height-sm: var(--jds-line-height-28);
  --jds-line-height-xs: var(--jds-line-height-24);
  --jds-line-height-2-xs: var(--jds-line-height-20);
  --jds-line-height-3-xs: var(--jds-line-height-16);
}

/*
 * Tablet mode — DATA ONLY (wire to a breakpoint at implementation time).
 * Differences from Desktop:
 *   --jds-font-size-display-lg: 52px;   --jds-font-size-display-md: 44px;
 *   --jds-font-size-display-sm: 36px;   --jds-font-size-heading-xl: 36px;
 *   --jds-font-size-heading-lg: 30px;   --jds-font-size-heading-md: 26px;
 *   --jds-font-size-heading-sm: 22px;
 *   --jds-line-height-3-xl: 60px;  --jds-line-height-2-xl: 52px;
 *   --jds-line-height-xl: 44px;   --jds-line-height-lg: 36px;
 *   (all other roles identical to Desktop)
 *
 * Mobile mode — DATA ONLY.
 * Differences from Desktop:
 *   --jds-font-size-display-lg: 40px;   --jds-font-size-display-md: 36px;
 *   --jds-font-size-display-sm: 32px;   --jds-font-size-heading-xl: 32px;
 *   --jds-font-size-heading-lg: 28px;   --jds-font-size-heading-md: 24px;
 *   --jds-font-size-heading-sm: 20px;   --jds-font-size-subtitle-md: 18px;
 *   --jds-font-size-body-lg: 18px;      --jds-font-size-label-lg: 18px;
 *   --jds-font-size-link-lg: 18px;      --jds-font-size-list-lg: 18px;
 *   --jds-line-height-3-xl: 48px;  --jds-line-height-2-xl: 44px;
 *   --jds-line-height-xl: 40px;   --jds-line-height-lg: 32px;
 *   --jds-line-height-md: 28px;   --jds-line-height-sm: 24px;
 *   (all other roles identical to Desktop)
 */

/* ================================================================
   3. Composed styles — the 34 Figma text styles, named 1:1
   ================================================================ */

/* ---- display (Bold, tighter tracking) ---- */
.jds-display-lg-bold  { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-display-lg); line-height: var(--jds-line-height-3-xl); font-weight: var(--jds-font-weight-bold); letter-spacing: var(--jds-letter-spacing-tighter); /* paragraph-spacing: none */ }
.jds-display-md-bold  { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-display-md); line-height: var(--jds-line-height-2-xl); font-weight: var(--jds-font-weight-bold); letter-spacing: var(--jds-letter-spacing-tighter); /* paragraph-spacing: none */ }
.jds-display-sm-bold  { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-display-sm); line-height: var(--jds-line-height-xl); font-weight: var(--jds-font-weight-bold); letter-spacing: var(--jds-letter-spacing-tighter); /* paragraph-spacing: none */ }

/* ---- heading (xl/lg Bold, md/sm Semi Bold; tight tracking) ---- */
.jds-heading-xl-bold      { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-heading-xl); line-height: var(--jds-line-height-xl); font-weight: var(--jds-font-weight-bold); letter-spacing: var(--jds-letter-spacing-tight); /* paragraph-spacing: none */ }
.jds-heading-lg-bold      { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-heading-lg); line-height: var(--jds-line-height-lg); font-weight: var(--jds-font-weight-bold); letter-spacing: var(--jds-letter-spacing-tight); /* paragraph-spacing: none */ }
.jds-heading-md-semibold  { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-heading-md); line-height: var(--jds-line-height-md); font-weight: var(--jds-font-weight-semibold); letter-spacing: var(--jds-letter-spacing-tight); /* paragraph-spacing: none */ }
.jds-heading-sm-semibold  { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-heading-sm); line-height: var(--jds-line-height-sm); font-weight: var(--jds-font-weight-semibold); letter-spacing: var(--jds-letter-spacing-tight); /* paragraph-spacing: none */ }

/* ---- subtitle ---- */
.jds-subtitle-md-semibold { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-subtitle-md); line-height: var(--jds-line-height-xs); font-weight: var(--jds-font-weight-semibold); letter-spacing: var(--jds-letter-spacing-normal); /* paragraph-spacing: none */ }
.jds-subtitle-sm-semibold { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-subtitle-sm); line-height: var(--jds-line-height-2-xs); font-weight: var(--jds-font-weight-semibold); letter-spacing: var(--jds-letter-spacing-normal); /* paragraph-spacing: none */ }

/* ---- body (paragraph-spacing: lg=24px at md/sm, xl=32px at lg) ---- */
.jds-body-lg-semibold { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-body-lg); line-height: var(--jds-line-height-md); font-weight: var(--jds-font-weight-semibold); letter-spacing: var(--jds-letter-spacing-normal); /* paragraph-spacing: xl (32px) */ }
.jds-body-lg-regular  { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-body-lg); line-height: var(--jds-line-height-md); font-weight: var(--jds-font-weight-regular); letter-spacing: var(--jds-letter-spacing-normal); /* paragraph-spacing: xl (32px) */ }
.jds-body-md-semibold { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-body-md); line-height: var(--jds-line-height-xs); font-weight: var(--jds-font-weight-semibold); letter-spacing: var(--jds-letter-spacing-normal); /* paragraph-spacing: lg (24px) */ }
.jds-body-md-regular  { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-body-md); line-height: var(--jds-line-height-xs); font-weight: var(--jds-font-weight-regular); letter-spacing: var(--jds-letter-spacing-normal); /* paragraph-spacing: lg (24px) */ }
.jds-body-sm-semibold { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-body-sm); line-height: var(--jds-line-height-2-xs); font-weight: var(--jds-font-weight-semibold); letter-spacing: var(--jds-letter-spacing-normal); /* paragraph-spacing: lg (24px) */ }
.jds-body-sm-regular  { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-body-sm); line-height: var(--jds-line-height-2-xs); font-weight: var(--jds-font-weight-regular); letter-spacing: var(--jds-letter-spacing-normal); /* paragraph-spacing: lg (24px) */ }

/* ---- label (JDS deviation: lg/md line-heights tightened — 24/20, not the SGDS defaults) ---- */
.jds-label-lg-semibold { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-label-lg); line-height: var(--jds-line-height-xs); font-weight: var(--jds-font-weight-semibold); letter-spacing: var(--jds-letter-spacing-normal); /* paragraph-spacing: none */ }
.jds-label-lg-regular  { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-label-lg); line-height: var(--jds-line-height-xs); font-weight: var(--jds-font-weight-regular); letter-spacing: var(--jds-letter-spacing-normal); /* paragraph-spacing: none */ }
.jds-label-md-semibold { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-label-md); line-height: var(--jds-line-height-2-xs); font-weight: var(--jds-font-weight-semibold); letter-spacing: var(--jds-letter-spacing-normal); /* paragraph-spacing: none */ }
.jds-label-md-regular  { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-label-md); line-height: var(--jds-line-height-2-xs); font-weight: var(--jds-font-weight-regular); letter-spacing: var(--jds-letter-spacing-normal); /* paragraph-spacing: none */ }
.jds-label-sm-semibold { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-label-sm); line-height: var(--jds-line-height-2-xs); font-weight: var(--jds-font-weight-semibold); letter-spacing: var(--jds-letter-spacing-normal); /* paragraph-spacing: none */ }
.jds-label-sm-regular  { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-label-sm); line-height: var(--jds-line-height-2-xs); font-weight: var(--jds-font-weight-regular); letter-spacing: var(--jds-letter-spacing-normal); /* paragraph-spacing: none */ }
.jds-label-xs-semibold { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-label-xs); line-height: var(--jds-line-height-3-xs); font-weight: var(--jds-font-weight-semibold); letter-spacing: var(--jds-letter-spacing-normal); /* paragraph-spacing: none */ }
.jds-label-xs-regular  { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-label-xs); line-height: var(--jds-line-height-3-xs); font-weight: var(--jds-font-weight-regular); letter-spacing: var(--jds-letter-spacing-normal); /* paragraph-spacing: none */ }

/* ---- caption ---- */
.jds-caption-semibold { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-caption-md); line-height: var(--jds-line-height-2-xs); font-weight: var(--jds-font-weight-semibold); letter-spacing: var(--jds-letter-spacing-normal); /* paragraph-spacing: md (16px) */ }
.jds-caption-regular  { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-caption-md); line-height: var(--jds-line-height-2-xs); font-weight: var(--jds-font-weight-regular); letter-spacing: var(--jds-letter-spacing-normal); /* paragraph-spacing: md (16px) */ }

/* ---- overline (wide tracking) ---- */
.jds-overline-semibold { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-overline-md); line-height: var(--jds-line-height-2-xs); font-weight: var(--jds-font-weight-semibold); letter-spacing: var(--jds-letter-spacing-wide); /* paragraph-spacing: none */ }
.jds-overline-regular  { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-overline-md); line-height: var(--jds-line-height-2-xs); font-weight: var(--jds-font-weight-regular); letter-spacing: var(--jds-letter-spacing-wide); /* paragraph-spacing: none */ }

/* ---- link (Regular only; underline is part of the style per Figma alias jds-text-decoration-underline) ---- */
.jds-link-lg-regular { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-link-lg); line-height: var(--jds-line-height-md); font-weight: var(--jds-font-weight-regular); letter-spacing: var(--jds-letter-spacing-normal); text-decoration: underline; /* paragraph-spacing: none */ }
.jds-link-md-regular { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-link-md); line-height: var(--jds-line-height-xs); font-weight: var(--jds-font-weight-regular); letter-spacing: var(--jds-letter-spacing-normal); text-decoration: underline; /* paragraph-spacing: none */ }
.jds-link-sm-regular { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-link-sm); line-height: var(--jds-line-height-2-xs); font-weight: var(--jds-font-weight-regular); letter-spacing: var(--jds-letter-spacing-normal); text-decoration: underline; /* paragraph-spacing: none */ }
.jds-link-xs-regular { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-link-xs); line-height: var(--jds-line-height-3-xs); font-weight: var(--jds-font-weight-regular); letter-spacing: var(--jds-letter-spacing-normal); text-decoration: underline; /* paragraph-spacing: none */ }

/* ---- list (Regular only; FIXED numeric line-heights, not responsive roles —
        the file binds these to jds/line-height/32|24|20 directly. Kept as
        SGDS's Figma file has it — a deliberate call, per CLAUDE.md.) ---- */
.jds-list-lg-regular { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-list-lg); line-height: var(--jds-line-height-32); font-weight: var(--jds-font-weight-regular); letter-spacing: var(--jds-letter-spacing-normal); /* no paragraph-spacing binding in Figma */ }
.jds-list-md-regular { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-list-md); line-height: var(--jds-line-height-24); font-weight: var(--jds-font-weight-regular); letter-spacing: var(--jds-letter-spacing-normal); /* no paragraph-spacing binding in Figma */ }
.jds-list-sm-regular { font-family: var(--jds-font-family-brand); font-size: var(--jds-font-size-list-sm); line-height: var(--jds-line-height-20); font-weight: var(--jds-font-weight-regular); letter-spacing: var(--jds-letter-spacing-normal); /* no paragraph-spacing binding in Figma */ }