/* ============================================================
   Sansoif — Typography tokens
   Two families. Display for personality, Hanken for everything
   that must read clearly (UI, body, legal).
   The webfonts themselves are declared in sansoif/fonts.css.
   ============================================================ */

:root {
  /* Families: --font-display, --font-text, --font-mono (sansoif/tokens.css). */

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Type scale (rem, 16px base) */
  --fs-3xs: 0.75rem;   /* 12px — legal fine print, captions */
  --fs-2xs: 0.8125rem; /* 13px — small labels */
  --fs-xs:  0.875rem;  /* 14px — UI labels, chips */
  --fs-sm:  0.9375rem; /* 15px — secondary text */
  --fs-md:  1rem;      /* 16px — base body */
  --fs-lg:  1.125rem;  /* 18px — lede, large body */
  --fs-xl:  1.375rem;  /* 22px — card titles */
  --fs-2xl: 1.75rem;   /* 28px — section sub-heads */
  --fs-3xl: 2.5rem;    /* 40px — section titles */
  --fs-4xl: 3.5rem;    /* 56px — page heading */
  --fs-5xl: 5rem;      /* 80px — hero / wordmark */

  /* Line heights */
  --lh-solid:   0.92;
  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.08em;

  /* ---- Semantic roles ---- */
  --text-wordmark:  var(--fw-black) var(--fs-5xl)/var(--lh-solid) var(--font-display);
  --text-display:   var(--fw-black) var(--fs-4xl)/var(--lh-tight) var(--font-display);
  --text-title:     var(--fw-bold)  var(--fs-3xl)/var(--lh-tight) var(--font-display);
  --text-subhead:   var(--fw-bold)  var(--fs-2xl)/var(--lh-snug)  var(--font-display);
  --text-card-title:var(--fw-bold)  var(--fs-xl)/var(--lh-snug)   var(--font-text);
  --text-lede:      var(--fw-regular) var(--fs-lg)/var(--lh-normal) var(--font-text);
  --text-body-role: var(--fw-regular) var(--fs-md)/var(--lh-normal) var(--font-text);
  --text-ui:        var(--fw-semibold) var(--fs-xs)/1 var(--font-text);
  --text-kicker:    var(--fw-bold) var(--fs-2xs)/1 var(--font-text);
}