/* ============================================================
   Sociala Widget — Typography tokens
   Single family (Open Sans). Tight tracking on display sizes,
   generous line-height on body. Sizes pulled from the .fig:
   15/14 dominate (title/body), 24/20 for headings, 10/12 captions.
   ============================================================ */

:root {
  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* weights */
  --fw-regular: 400; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* type scale (px) */
  --fs-display: 32px;   /* hero name on public widget          */
  --fs-h1: 24px;        /* screen titles                       */
  --fs-h2: 20px;        /* section headers                     */
  --fs-title: 15px;     /* card title (bold)                   */
  --fs-body: 14px;      /* body / description / call text      */
  --fs-label: 13px;     /* form labels                         */
  --fs-caption: 12px;   /* secondary captions                  */
  --fs-micro: 10px;     /* badge text                          */

  /* line-heights (unitless) */
  --lh-tight: 1.28; /* @kind other */
  --lh-snug: 1.36; /* @kind other */
  --lh-normal: 1.5; /* @kind other */

  /* letter-spacing */
  --ls-tight: -0.01em; /* @kind other */
  --ls-tighter: -0.02em; /* @kind other */
  --ls-normal: 0; /* @kind other */

  /* ---- Composite text styles (apply with one var set) ---- */
  --text-display: var(--fw-bold) var(--fs-display) / var(--lh-tight) var(--font-sans);
  --text-h1: var(--fw-bold) var(--fs-h1) / var(--lh-tight) var(--font-sans);
  --text-h2: var(--fw-bold) var(--fs-h2) / var(--lh-tight) var(--font-sans);
  --text-card-title: var(--fw-bold) var(--fs-title) / var(--lh-tight) var(--font-sans);
  --text-body: var(--fw-regular) var(--fs-body) / var(--lh-snug) var(--font-sans);
  --text-body-strong: var(--fw-semibold) var(--fs-body) / var(--lh-snug) var(--font-sans);
  --text-caption: var(--fw-regular) var(--fs-caption) / var(--lh-snug) var(--font-sans);
  --text-badge: var(--fw-regular) var(--fs-micro) / var(--lh-snug) var(--font-sans);
}