/* ============================================================================
   React Spectrum (Spectrum 2) — Typography tokens
   Type scale is a 1.125 (Major Second) ratio anchored at font-size-100 = 14px
   (desktop/medium scale). Values rounded to the nearest 1px, matching S2 runtime.
   Font families: Adobe Clean is proprietary and is SUBSTITUTED here with its
   open-source sibling Source Sans 3 (see readme "Font substitutions").
   ============================================================================ */

:root {
  /* Font families */
  --font-sans:  "Source Sans 3", "Adobe Clean", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Source Serif 4", "Adobe Clean Serif", Georgia, serif;
  --font-code:  "Source Code Pro", ui-monospace, Monaco, monospace;

  /* Raw font-size scale (desktop / medium) */
  --font-size-25:   10px;
  --font-size-50:   11px;
  --font-size-75:   12px;
  --font-size-100:  14px;   /* base */
  --font-size-200:  16px;
  --font-size-300:  18px;
  --font-size-400:  20px;
  --font-size-500:  22px;
  --font-size-600:  25px;
  --font-size-700:  28px;
  --font-size-800:  32px;
  --font-size-900:  36px;
  --font-size-1000: 40px;
  --font-size-1100: 45px;
  --font-size-1200: 51px;
  --font-size-1300: 58px;
  --font-size-1400: 65px;
  --font-size-1500: 73px;

  /* Font weights */
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-bold:       700;
  --font-weight-extra-bold: 800;
  --font-weight-black:      900;
  --heading-font-weight:    var(--font-weight-bold);
  --title-font-weight:      var(--font-weight-bold);
  --detail-font-weight:     var(--font-weight-bold);

  /* Line heights */
  --line-height-100: 1.3;
  --line-height-200: 1.5;   /* body / UI spacious */
  --line-height-ui:  1.3;
  --line-height-heading: 1.15;
  --line-height-body: 1.5;
  --line-height-code: 1.5;

  /* ---- Semantic UI type sizes (used inside components) ---- */
  --font-size-ui-xs:  var(--font-size-50);
  --font-size-ui-sm:  var(--font-size-75);
  --font-size-ui:     var(--font-size-100);
  --font-size-ui-lg:  var(--font-size-200);
  --font-size-ui-xl:  var(--font-size-300);
  --font-size-ui-2xl: var(--font-size-400);
  --font-size-ui-3xl: var(--font-size-500);

  /* ---- Heading sizes ---- */
  --font-size-heading-2xs: var(--font-size-100);
  --font-size-heading-xs:  var(--font-size-300);
  --font-size-heading-sm:  var(--font-size-400);
  --font-size-heading:     var(--font-size-500);
  --font-size-heading-lg:  var(--font-size-700);
  --font-size-heading-xl:  var(--font-size-900);
  --font-size-heading-2xl: var(--font-size-1100);
  --font-size-heading-3xl: var(--font-size-1300);

  /* ---- Body sizes ---- */
  --font-size-body-xs:  var(--font-size-75);
  --font-size-body-sm:  var(--font-size-100);
  --font-size-body:     var(--font-size-200);
  --font-size-body-lg:  var(--font-size-300);
  --font-size-body-xl:  var(--font-size-400);
  --font-size-body-2xl: var(--font-size-500);
  --font-size-body-3xl: var(--font-size-600);

  /* ---- Detail (labels/eyebrows) ---- */
  --font-size-detail-sm: var(--font-size-75);
  --font-size-detail:    var(--font-size-100);
  --font-size-detail-lg: var(--font-size-200);

  /* ---- Code sizes ---- */
  --font-size-code-sm: var(--font-size-100);
  --font-size-code:    var(--font-size-200);
}