/* ============================================================
   NR — Typography tokens
   Gia  → display & headings (elegant, airy, generous tracking)
   Inter → body, UI, labels, data
   The wordmark pairs a thin geometric display face with a clean
   grotesque; headings run light-to-regular, never heavy.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Gia", "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Inter", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Menlo", monospace;

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

  /* ---- Display scale (Gia) — for hero & section titles ---- */
  --fs-display-xl: 76px;   --lh-display-xl: 1.02; /* @kind font */
  --fs-display-lg: 56px;   --lh-display-lg: 1.05; /* @kind font */
  --fs-display-md: 42px;   --lh-display-md: 1.1; /* @kind font */
  --fs-display-sm: 32px;   --lh-display-sm: 1.14; /* @kind font */

  /* ---- Text scale (Inter) ---- */
  --fs-2xl: 24px;  --lh-2xl: 1.32; /* @kind font */
  --fs-xl:  20px;  --lh-xl:  1.4; /* @kind font */
  --fs-lg:  18px;  --lh-lg:  1.5; /* @kind font */
  --fs-md:  16px;  --lh-md:  1.6; /* @kind font */
  --fs-sm:  14px;  --lh-sm:  1.55; /* @kind font */
  --fs-xs:  13px;  --lh-xs:  1.5; /* @kind font */
  --fs-2xs: 11px;  --lh-2xs: 1.4; /* @kind font */

  /* ---- Letter-spacing ---- */
  --tracking-display: -0.01em; /* @kind font */
  --tracking-tight:   -0.01em; /* @kind font */
  --tracking-normal:  0em; /* @kind font */
  --tracking-wide:    0.04em; /* @kind font */
  --tracking-eyebrow: 0.22em; /* @kind font */

  /* ---- Semantic roles ---- */
  --text-eyebrow-size: var(--fs-2xs);
  --text-body-size:    var(--fs-md);
  --text-caption-size: var(--fs-sm);
}

/* Optional helper roles consumers can apply directly */
.nr-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.nr-display {
  font-family: var(--font-display);
  font-weight: var(--fw-thin);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display-lg);
}
.nr-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  color: var(--text-secondary);
}