/* ============================================================
   Lux Light — Typography
   --serif : Cormorant Garamond  → display headings (ultra-light 300)
   --sans  : Hanken Grotesk       → body, forms, UI
   --mono  : DM Mono              → eyebrows, labels, lux readouts (small caps, wide tracking)
   ============================================================ */

:root {
  /* ---------- Families ---------- */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* @kind font */
  --sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; /* @kind font */
  --mono:  "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* @kind font */

  /* ---------- Weights ---------- */
  --w-display:   300;   /* @kind font */
  --w-serif-med: 500;   /* @kind font */
  --w-light:     300;   /* @kind font */
  --w-regular:   400;   /* @kind font */
  --w-medium:    500;   /* @kind font */
  --w-semibold:  600;   /* @kind font */
  --w-bold:      700;   /* @kind font */

  /* ---------- Type scale (display uses serif, rest sans) ---------- */
  --fs-display-1: clamp(56px, 8vw, 104px);  /* @kind font */
  --fs-display-2: clamp(40px, 5.5vw, 68px); /* @kind font */
  --fs-display-3: clamp(30px, 3.6vw, 46px); /* @kind font */
  --fs-h1:        32px;  /* @kind font */
  --fs-h2:        24px;  /* @kind font */
  --fs-h3:        19px;  /* @kind font */
  --fs-body-lg:   18px;  /* @kind font */
  --fs-body:      16px;  /* @kind font */
  --fs-body-sm:   14px;  /* @kind font */
  --fs-caption:   13px;  /* @kind font */
  --fs-micro:     11px;  /* @kind font */

  /* ---------- Line heights ---------- */
  --lh-tight:   1.05;   /* @kind font */
  --lh-snug:    1.18;   /* @kind font */
  --lh-normal:  1.5;    /* @kind font */
  --lh-relaxed: 1.7;    /* @kind font */

  /* ---------- Tracking ---------- */
  --tracking-display: -0.01em;   /* @kind font */
  --tracking-normal:  0;         /* @kind font */
  --tracking-wide:    0.04em;    /* @kind font */
  --tracking-mono:    0.22em;    /* @kind font */
  --tracking-mono-sm: 0.16em;    /* @kind font */
}

/* ---------- Reusable text roles ---------- */
.lx-eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--accent-text);
}
.lx-display {
  font-family: var(--serif);
  font-weight: var(--w-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-display);
}
.lx-heading {
  font-family: var(--sans);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  color: var(--text-heading);
}
.lx-body {
  font-family: var(--sans);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  color: var(--text-body);
}
.lx-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-mono-sm);
  text-transform: uppercase;
  color: var(--text-muted);
}