/* ==========================================================================
   TYPOGRAPHY.CSS — Full type system from DESIGN.md
   Nursing Success Academy Design System
   ========================================================================== */

/* ---- Display / Hero (Instrument Serif) ---- */
.display-xl {
  font-family: var(--font-display);
  font-size: 3.5rem;     /* 56px */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-1);
}

.display-lg {
  font-family: var(--font-display);
  font-size: 2.5rem;     /* 40px */
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-1);
}

.display-md {
  font-family: var(--font-display);
  font-size: 2rem;       /* 32px */
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  color: var(--text-1);
}

/* ---- Headings (Plus Jakarta Sans) ---- */
.heading-lg {
  font-family: var(--font-body);
  font-size: 1.5rem;     /* 24px */
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-1);
}

.heading-md {
  font-family: var(--font-body);
  font-size: 1.125rem;   /* 18px */
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-1);
}

/* ---- Body (Plus Jakarta Sans) ---- */
.body-lg {
  font-family: var(--font-body);
  font-size: 1.125rem;   /* 18px */
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-2);
}

.body-md {
  font-family: var(--font-body);
  font-size: 1rem;       /* 16px */
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-1);
}

.body-sm {
  font-family: var(--font-body);
  font-size: 0.875rem;   /* 14px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-2);
}

/* ---- Labels & UI ---- */
.label {
  font-family: var(--font-body);
  font-size: 0.8125rem;  /* 13px */
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-2);
}

.caption {
  font-family: var(--font-body);
  font-size: 0.75rem;    /* 12px */
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-3);
}

.micro {
  font-family: var(--font-body);
  font-size: 0.6875rem;  /* 11px */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---- Data / Scores (JetBrains Mono) ---- */
.data-lg {
  font-family: var(--font-data);
  font-size: 2.25rem;    /* 36px */
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.data-md {
  font-family: var(--font-data);
  font-size: 1.5rem;     /* 24px */
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.data-sm {
  font-family: var(--font-data);
  font-size: 0.875rem;   /* 14px */
  font-weight: 400;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* ---- Section Label (Dashboard sidebar, stat card labels) ---- */
.section-label {
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-3);
}

/* ---- Default HTML Element Styling ---- */
h1 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-lg) 0;
  color: var(--text-1);
}

h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 var(--space-md) 0;
  color: var(--text-1);
}

h3 {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 var(--space-md) 0;
  color: var(--text-1);
}

h4 {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 var(--space-sm) 0;
  color: var(--text-1);
}

h5, h6 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 var(--space-sm) 0;
  color: var(--text-1);
}

p {
  margin: 0 0 var(--space-md) 0;
  color: var(--text-2);
  line-height: 1.6;
}

p:last-child {
  margin-bottom: 0;
}

/* ---- Responsive Typography ---- */
@media (max-width: 1024px) {
  .display-xl {
    font-size: 2.75rem;  /* 44px */
  }
  .display-lg {
    font-size: 2rem;     /* 32px */
  }
  .display-md {
    font-size: 1.75rem;  /* 28px */
  }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
}

@media (max-width: 640px) {
  .display-xl {
    font-size: 2.25rem;  /* 36px */
  }
  .display-lg {
    font-size: 1.75rem;  /* 28px */
  }
  .display-md {
    font-size: 1.5rem;   /* 24px */
  }
  .data-lg {
    font-size: 1.75rem;  /* 28px */
  }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
}