/* ─────────────────────────────────────────────────────────────
   BotFlow — Typography tokens
   Display & UI: Plus Jakarta Sans (friendly geometric, very legible)
   Mono / numbers: JetBrains Mono (phones, IDs, tabular figures)
   ───────────────────────────────────────────────────────────── */
:root {
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (rem, 16px base) */
  --text-2xs:  0.6875rem; /* 11px — micro labels */
  --text-xs:   0.75rem;   /* 12px — captions, meta */
  --text-sm:   0.875rem;  /* 14px — secondary / dense UI */
  --text-base: 0.9375rem; /* 15px — default body in app */
  --text-md:   1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px — card titles */
  --text-xl:   1.375rem;  /* 22px — section headings */
  --text-2xl:  1.75rem;   /* 28px — page titles */
  --text-3xl:  2.25rem;   /* 36px — display */
  --text-4xl:  3rem;      /* 48px — hero display */

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

  /* Line heights */
  --lh-tight:   1.15; /* @kind font */
  --lh-snug:    1.3; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Letter spacing */
  --tracking-tight: -0.02em;  /* display / headings */
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;   /* uppercase eyebrows */
  --tracking-wider: 0.08em;

  /* Semantic roles */
  --text-page-title:  var(--text-2xl);
  --text-section:     var(--text-xl);
  --text-card-title:  var(--text-lg);
  --text-body:        var(--text-base);
  --text-label:       var(--text-sm);
  --text-caption:     var(--text-xs);
  --text-eyebrow:     var(--text-2xs);
}