/* ============================================================
   LexLocal — Typography
   Serif (Instrument Serif) for large marketing headlines ONLY.
   Sans (Inter) for everything else. Generous line-heights for a
   calm, unhurried, trustworthy read.
   ============================================================ */

:root {
  /* Families */
  --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Weights (Inter) */
  --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 */

  /* Display — serif, marketing moments only.
     line-height tight (serif reads big), tracking slightly negative.
     -lh (line-height) and -ls (letter-spacing) are unitless/typographic. */
  --display-2xl: 76px;  --display-2xl-lh: 1.02 /* @kind other */; --display-2xl-ls: -0.02em /* @kind other */;
  --display-xl:  60px;  --display-xl-lh:  1.05 /* @kind other */; --display-xl-ls:  -0.02em /* @kind other */;
  --display-lg:  46px;  --display-lg-lh:  1.08 /* @kind other */; --display-lg-ls:  -0.015em /* @kind other */;

  /* Headings — sans (Inter), structural UI/section headings */
  --h1: 40px;  --h1-lh: 1.15 /* @kind other */; --h1-ls: -0.02em /* @kind other */;
  --h2: 31px;  --h2-lh: 1.2 /* @kind other */;  --h2-ls: -0.015em /* @kind other */;
  --h3: 24px;  --h3-lh: 1.3 /* @kind other */;  --h3-ls: -0.01em /* @kind other */;
  --h4: 19px;  --h4-lh: 1.4 /* @kind other */;  --h4-ls: -0.005em /* @kind other */;
  --h5: 16px;  --h5-lh: 1.45 /* @kind other */; --h5-ls:  0 /* @kind other */;
  --overline: 12.5px; --overline-lh: 1.4 /* @kind other */; --overline-ls: 0.12em /* @kind other */;

  /* Body — sans, generous leading */
  --body-lg: 19px;  --body-lg-lh: 1.7 /* @kind other */;
  --body:    16.5px; --body-lh:   1.65 /* @kind other */;
  --body-sm: 14.5px; --body-sm-lh: 1.6 /* @kind other */;
  --caption: 13px;  --caption-lh: 1.5 /* @kind other */;
  --footnote:12px;  --footnote-lh: 1.5 /* @kind other */;
}

/* Optional convenience classes (tokens are the source of truth) */
.lx-display-2xl { font-family: var(--font-serif); font-weight: 400; font-size: var(--display-2xl); line-height: var(--display-2xl-lh); letter-spacing: var(--display-2xl-ls); color: var(--text-strong); }
.lx-display-xl  { font-family: var(--font-serif); font-weight: 400; font-size: var(--display-xl);  line-height: var(--display-xl-lh);  letter-spacing: var(--display-xl-ls);  color: var(--text-strong); }
.lx-display-lg  { font-family: var(--font-serif); font-weight: 400; font-size: var(--display-lg);  line-height: var(--display-lg-lh);  letter-spacing: var(--display-lg-ls);  color: var(--text-strong); }

.lx-h1 { font-family: var(--font-sans); font-weight: 700; font-size: var(--h1); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); color: var(--text-strong); }
.lx-h2 { font-family: var(--font-sans); font-weight: 700; font-size: var(--h2); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); color: var(--text-strong); }
.lx-h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--h3); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); color: var(--text-strong); }
.lx-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--h4); line-height: var(--h4-lh); letter-spacing: var(--h4-ls); color: var(--text-strong); }

.lx-overline { font-family: var(--font-sans); font-weight: 600; font-size: var(--overline); line-height: var(--overline-lh); letter-spacing: var(--overline-ls); text-transform: uppercase; color: var(--text-muted); }

.lx-body-lg { font-family: var(--font-sans); font-weight: 400; font-size: var(--body-lg); line-height: var(--body-lg-lh); color: var(--text-body); }
.lx-body    { font-family: var(--font-sans); font-weight: 400; font-size: var(--body); line-height: var(--body-lh); color: var(--text-body); }
.lx-body-sm { font-family: var(--font-sans); font-weight: 400; font-size: var(--body-sm); line-height: var(--body-sm-lh); color: var(--text-body); }
.lx-caption { font-family: var(--font-sans); font-weight: 400; font-size: var(--caption); line-height: var(--caption-lh); color: var(--text-muted); }