/* ===========================================================================
   UGConnect — Typography Tokens
   ---------------------------------------------------------------------------
   Display / brand:  Garet → Outfit (substitute) → Poppins
   UI / body:        Poppins
   Headings: Garet Bold/SemiBold · Body: Poppins Regular ·
   Buttons: Poppins SemiBold · Labels: Poppins Medium
   =========================================================================== */

:root {
  /* ---- Families ---------------------------------------------------------- */
  --font-display: 'Garet', 'Poppins', system-ui, sans-serif;
  --font-ui:      'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Poppins', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Weights ----------------------------------------------------------- */
  --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 */
  --fw-extra:     800;       /* @kind font */

  /* ---- Type scale (px → rem @16) ----------------------------------------- */
  --text-display-2xl: 4.5rem;   /* 72 — hero on large surfaces */
  --text-display-xl:  3.5rem;   /* 56 */
  --text-display-lg:  2.75rem;  /* 44 */
  --text-h1:          2.25rem;  /* 36 */
  --text-h2:          1.75rem;  /* 28 */
  --text-h3:          1.375rem; /* 22 */
  --text-h4:          1.125rem; /* 18 */
  --text-body-lg:     1.125rem; /* 18 */
  --text-body:        1rem;     /* 16 */
  --text-body-sm:     0.875rem; /* 14 */
  --text-caption:     0.8125rem;/* 13 */
  --text-overline:    0.6875rem;/* 11 */

  /* ---- Line heights ------------------------------------------------------ */
  --leading-tight:   1.05;   /* display */
  --leading-snug:    1.18;   /* headings */
  --leading-normal:  1.5;    /* body */
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---------------------------------------------------- */
  --tracking-tighter: -0.03em; /* big display */
  --tracking-tight:   -0.015em;/* headings */
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-overline:0.14em;  /* uppercase eyebrows */
}

/* ---- Optional helper classes (specimen + quick use) ---------------------- */
.ds-display { font-family: var(--font-display); font-weight: var(--fw-bold);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); }
.ds-heading { font-family: var(--font-display); font-weight: var(--fw-semibold);
  line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
.ds-body    { font-family: var(--font-ui); font-weight: var(--fw-regular);
  line-height: var(--leading-normal); }
.ds-overline{ font-family: var(--font-ui); font-weight: var(--fw-semibold);
  font-size: var(--text-overline); letter-spacing: var(--tracking-overline);
  text-transform: uppercase; }