/* ============================================================
   JITS Innovation Labs — Typography tokens
   Family: Inter (system fallback stack). Headings are bold &
   tracking-tight; nav/labels are uppercase & tracking-wide.
   Scale mirrors the Tailwind text-* sizes used on the site.
   ============================================================ */
:root {
  /* Families */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: var(--font-sans); /* headings use the same family, heavier weight */

  /* 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 */

  /* Type scale (px → rem, Tailwind-aligned) */
  --text-xs:   0.75rem;   /* 12 — micro labels */
  --text-sm:   0.875rem;  /* 14 — nav, captions, meta */
  --text-base: 1rem;      /* 16 — body */
  --text-lg:   1.125rem;  /* 18 — lead paragraph */
  --text-xl:   1.25rem;   /* 20 — card titles */
  --text-2xl:  1.5rem;    /* 24 — case-study titles */
  --text-3xl:  1.875rem;  /* 30 — section headings (mobile) */
  --text-4xl:  2.25rem;   /* 36 — section headings */
  --text-5xl:  3rem;      /* 48 — hero (mobile→md) */
  --text-6xl:  3.75rem;   /* 60 — hero headline */

  /* Line heights */
  --leading-tight:   1.1;   /* display headlines */
  --leading-snug:    1.25;  /* headings */
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;  /* body copy */

  /* Letter spacing */
  --tracking-tighter: -0.02em; /* large headlines */
  --tracking-tight:   -0.01em; /* headings */
  --tracking-normal:  0;
  --tracking-wide:    0.05em;  /* uppercase nav / labels */
  --tracking-wider:   0.08em;  /* eyebrows / metric labels */

  /* Semantic roles */
  --type-display:  var(--fw-bold) var(--text-6xl)/var(--leading-tight) var(--font-display);
  --type-h1:       var(--fw-bold) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --type-h2:       var(--fw-bold) var(--text-4xl)/var(--leading-snug) var(--font-display);
  --type-h3:       var(--fw-bold) var(--text-xl)/var(--leading-snug) var(--font-sans);
  --type-lead:     var(--fw-regular) var(--text-lg)/var(--leading-relaxed) var(--font-sans);
  --type-body:     var(--fw-regular) var(--text-base)/var(--leading-relaxed) var(--font-sans);
  --type-caption:  var(--fw-medium) var(--text-sm)/var(--leading-normal) var(--font-sans);
}