/* ============================================================
   TYPOGRAPHY — Lumina 2027
   Display: Fraunces (optical variable serif, expressive)
   Body/UI: DM Sans (geometric, clean)
   Code:    JetBrains Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400;1,9..144,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── FONT FAMILIES ── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Courier New', monospace;

  /* ── TYPE SCALE (1.25 Major Third) ── */
  --text-xs:   0.64rem;     /* 10.2px — labels, badges */
  --text-sm:   0.8rem;      /* 12.8px — captions, meta */
  --text-base: 1rem;        /* 16px   — body */
  --text-md:   1.25rem;     /* 20px   — lead / intro */
  --text-lg:   1.563rem;    /* 25px   — h3 */
  --text-xl:   1.953rem;    /* 31px   — h2 */
  --text-2xl:  2.441rem;    /* 39px   — h1 */
  --text-3xl:  3.052rem;    /* 48.8px — display */
  --text-4xl:  4rem;        /* 64px   — hero */
  --text-hero: clamp(3rem, 7vw, 6rem); /* fluid hero */

  /* ── WEIGHTS ── */
  --weight-light:   300; /* @kind font */
  --weight-regular: 400; /* @kind font */
  --weight-medium:  500; /* @kind font */
  --weight-bold:    600; /* @kind font */
  --weight-display: 700; /* @kind font */

  /* ── LINE HEIGHTS ── */
  --leading-tight:  1.1; /* @kind font */
  --leading-snug:   1.3; /* @kind font */
  --leading-normal: 1.6; /* @kind font */
  --leading-loose:  1.8; /* @kind font */

  /* ── LETTER SPACING ── */
  --tracking-tight:  -0.03em; /* @kind font */
  --tracking-normal:  0;      /* @kind font */
  --tracking-wide:    0.04em; /* @kind font */
  --tracking-wider:   0.08em; /* @kind font */
  --tracking-widest:  0.12em; /* @kind font */
}

/* ── BASE RESETS ── */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--surface-page);
}

/* ── HEADING SCALE ── */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}
h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}
h5, h6 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

/* ── UTILITY CLASSES ── */
.display {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.display em, .h1 em, .h2 em {
  font-style: italic;
  font-weight: inherit;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-accent);
}

.lead {
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  line-height: var(--leading-loose);
  color: var(--text-secondary);
}

.caption {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-feature-settings: 'liga' 0;
}