/*
 * JDS typography primitives, verified against the JDS Design System Figma
 * primitives export on 2026-09-14.
 *
 * Note on naming: paths map from Figma's "/" to CSS's "-"
 * (jds/font-size/16 --> --jds-font-size-16).
 *
 * PRIMITIVES ONLY. This is layer 1 of three: the raw scales, named after their
 * own values. The two layers above it stay in docs/design-tokens/
 * jds-typography.css and are the ones a component actually reads —
 *   layer 2, responsive aliases: --jds-font-size-display-lg, etc.
 *   layer 3, the 34 composed Figma text styles as classes: .jds-display-lg-bold, etc.
 * so `--jds-font-size-16` is not a role and should not be used directly.
 *
 * `paragraph-spacing` is a Figma sibling of `spacer` and lives in spacing.css.
 *
 * JDS deviations, carried over with the values (fork-decisions.md, Deviation 2):
 *   - No Light (300) styles exist — JDS deleted all 10 (44 --> 34 styles). The
 *     primitive is exported for fidelity because the VARIABLE still exists in
 *     Figma, 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, label/md --> 20).
 *
 * Moved here from docs/design-tokens/jds-typography.css; every value was
 * already byte-identical to Figma, so this relocates the declarations without
 * changing one of them. Two values differ in FORM only and the repo's form is
 * the correct one: Figma's font-family reads `Inter` where CSS needs the
 * quoted `'Inter'`, and Figma's letter-spacing/tight reads
 * -0.4000000059604645 (a float32 round-trip of -0.4).
 */

:root {
  /* ---- Font family ---- */
  --jds-font-family-brand: 'Inter';

  /* ---- Font weights ---- */
  --jds-font-weight-light: 300; /* variable exists in Figma; NO JDS style uses it — see header */
  --jds-font-weight-regular: 400;
  --jds-font-weight-semibold: 600;
  --jds-font-weight-bold: 700;

  /* ---- Font sizes ---- */
  --jds-font-size-12: 12px;
  --jds-font-size-14: 14px;
  --jds-font-size-16: 16px;
  --jds-font-size-18: 18px;
  --jds-font-size-20: 20px;
  --jds-font-size-22: 22px;
  --jds-font-size-24: 24px;
  --jds-font-size-26: 26px;
  --jds-font-size-28: 28px;
  --jds-font-size-30: 30px;
  --jds-font-size-32: 32px;
  --jds-font-size-36: 36px;
  --jds-font-size-40: 40px;
  --jds-font-size-44: 44px;
  --jds-font-size-48: 48px;
  --jds-font-size-52: 52px;
  --jds-font-size-56: 56px;

  /* ---- Line heights ---- */
  --jds-line-height-16: 16px;
  --jds-line-height-20: 20px;
  --jds-line-height-24: 24px;
  --jds-line-height-28: 28px;
  --jds-line-height-32: 32px;
  --jds-line-height-36: 36px;
  --jds-line-height-40: 40px;
  --jds-line-height-44: 44px;
  --jds-line-height-48: 48px;
  --jds-line-height-52: 52px;
  --jds-line-height-56: 56px;
  --jds-line-height-60: 60px;
  --jds-line-height-64: 64px;

  /* ---- Letter spacing ---- */
  --jds-letter-spacing-tighter: -1px;
  --jds-letter-spacing-tight: -0.4px;
  --jds-letter-spacing-normal: 0;
  --jds-letter-spacing-wide: 1px;
  --jds-letter-spacing-wider: 2px; /* exists in Figma; no current style uses it */
}
