/* ============================================================
   Meshage — Typography tokens
   Brand: Quicksand · UI: Space Grotesk · Data: JetBrains Mono
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-brand: 'Urbanist', system-ui, sans-serif;        /* logo voice (wordmark is Urbanist), hero moments */
  --font-sans:  'Space Grotesk', system-ui, sans-serif;   /* all UI text */
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;/* hashes, hops, signal data */

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

  /* ---- Type scale (mobile-first, px) ---- */
  --text-display: 40px;   /* onboarding hero */
  --text-h1: 30px;
  --text-h2: 24px;
  --text-h3: 20px;
  --text-lg: 18px;
  --text-base: 16px;      /* body / message text */
  --text-sm: 14px;        /* secondary, list meta */
  --text-xs: 12px;        /* captions, timestamps */
  --text-2xs: 11px;       /* badges, overline labels */

  /* ---- Line heights ---- */
  --lh-tight: 1.1;     /* @kind font */
  --lh-snug: 1.25;     /* @kind font */
  --lh-normal: 1.45;   /* @kind font */
  --lh-relaxed: 1.6;   /* @kind font */

  /* ---- Tracking ---- */
  --tracking-tight: -0.02em; /* @kind font */
  --tracking-normal: 0;      /* @kind font */
  --tracking-wide: 0.04em;   /* @kind font */
  --tracking-caps: 0.12em;   /* @kind font */

  /* ---- Semantic text roles ---- */
  --role-display: var(--fw-bold) var(--text-display)/var(--lh-tight) var(--font-brand); /* @kind font */
  --role-h1: var(--fw-semibold) var(--text-h1)/var(--lh-snug) var(--font-sans);
  --role-h2: var(--fw-semibold) var(--text-h2)/var(--lh-snug) var(--font-sans);
  --role-body: var(--fw-regular) var(--text-base)/var(--lh-normal) var(--font-sans);
  --role-mono: var(--fw-medium) var(--text-sm)/var(--lh-snug) var(--font-mono);
}