/* ============================================================
   Tassel — Typography tokens
   Brand font: Manrope. Product UI body: Inter. Display accents: Sora.
   Sizes follow the Figma Typography variable collection (desktop mode);
   mobile scale noted where it differs.
   ============================================================ */

:root {
  /* Families */
  --font-brand:   "Manrope", "Inter", system-ui, sans-serif; /* headings, brand */
  --font-ui:      "Inter", "Manrope", system-ui, sans-serif;  /* product body/UI */
  --font-display: "Sora", "Manrope", system-ui, sans-serif;   /* big numeric / display */

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* Font sizes — desktop (Figma Typography collection) */
  --fs-xs:  14px;
  --fs-sm:  16px;
  --fs-md:  18px;
  --fs-lg:  20px;
  --fs-xl:  24px;
  --fs-2xl: 32px;
  --fs-3xl: 40px;
  --fs-4xl: 48px;

  /* Body / control sizes used across the product UI */
  --fs-body:    14px; /* the dominant in-app text size */
  --fs-body-sm: 12px;
  --fs-label:   12px;

  /* Line heights */
  --lh-tight:   1.15; /* @kind other */
  --lh-snug:    1.3;  /* @kind other */
  --lh-normal:  1.45; /* @kind other */
  --lh-relaxed: 1.6;  /* @kind other */

  /* Letter spacing */
  --ls-tight:  -0.02em; /* @kind other */
  --ls-normal: 0;       /* @kind other */
  --ls-wide:   0.01em;  /* @kind other */
}