/* ============================================================
   MWG Design & Research — Typography tokens
   Two families, sharply divided by job:
     • Poppins  — geometric sans for ALL interface chrome, the
       wordmark, labels, numbers, navigation. Tight tracking on
       display; wide tracking on uppercase micro-labels.
     • Literata — a serif used ONLY for reading copy (synopses,
       essays, captions of prose). Set at light weights (300/400)
       with generous leading.
   The system is deliberately small-scale and dense (Swiss data
   density), but the tokens below are 1× real-world sizes.
   ============================================================ */
:root {
  /* --- Families --- */
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui:      "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Literata", Georgia, "Times New Roman", serif;

  /* --- Weights (Poppins) --- */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */

  /* --- Reading weights (Literata, kept light) --- */
  --fw-read-light:  300; /* @kind font */
  --fw-read:        400; /* @kind font */

  /* --- Type scale (px) --- */
  --fs-micro:     11px;  /* uppercase tracked labels */
  --fs-caption:   12px;
  --fs-small:     13px;
  --fs-body:      15px;  /* Literata reading copy */
  --fs-ui:        14px;  /* default interface text */
  --fs-base:      16px;
  --fs-h4:        18px;
  --fs-h3:        21px;
  --fs-h2:        26px;
  --fs-h1:        33px;
  --fs-display:   46px;  /* wordmark / hero */

  /* --- Line heights --- */
  --lh-tight:     1.12;  /* display + headings */ /* @kind font */
  --lh-snug:      1.3; /* @kind font */
  --lh-ui:        1.4; /* @kind font */
  --lh-read:      1.62;  /* Literata body */ /* @kind font */

  /* --- Letter spacing --- */
  --ls-display:  -0.01em;  /* pull display tight */ /* @kind font */
  --ls-tight:    -0.005em; /* @kind font */
  --ls-normal:    0; /* @kind font */
  --ls-label:     0.09em;   /* uppercase micro-labels */ /* @kind font */
  --ls-label-wide: 0.14em;  /* eyebrow / status strip */ /* @kind font */

  /* ============================================================
     Semantic text roles
     ============================================================ */
  --text-display-font:   var(--font-display);
  --text-display-weight: var(--fw-bold);

  --text-heading-font:   var(--font-display);
  --text-heading-weight: var(--fw-medium);

  --text-label-font:     var(--font-display);
  --text-label-weight:   var(--fw-semibold);
  --text-label-spacing:  var(--ls-label);
  --text-label-transform: uppercase;

  --text-ui-font:        var(--font-ui);
  --text-ui-weight:      var(--fw-regular);

  --text-read-font:      var(--font-body);
  --text-read-weight:    var(--fw-read);
  --text-read-leading:   var(--lh-read);
}