/* ===========================================
   Penpoint Typography System
   Source Serif 4 only - simple and clean
   =========================================== */

/* ===========================================
   DISPLAY & HEADINGS
   =========================================== */

.font-display {
  font-family: 'Source Serif 4', ui-serif, Georgia, serif;
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

.font-heading-lg {
  font-family: 'Source Serif 4', ui-serif, Georgia, serif;
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.font-heading {
  font-family: 'Source Serif 4', ui-serif, Georgia, serif;
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.font-heading-sm {
  font-family: 'Source Serif 4', ui-serif, Georgia, serif;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

/* ===========================================
   BODY TEXT
   =========================================== */

.font-body {
  font-family: 'Source Serif 4', ui-serif, Georgia, serif;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
}

.font-body-lg {
  font-family: 'Source Serif 4', ui-serif, Georgia, serif;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--leading-normal);
}

.font-body-med {
  font-family: 'Source Serif 4', ui-serif, Georgia, serif;
  font-size: var(--text-med);
  font-weight: 400;
  line-height: var(--leading-normal);
}

.font-body-sm {
  font-family: 'Source Serif 4', ui-serif, Georgia, serif;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-normal);
}

/* ===========================================
   UI & INTERFACE ELEMENTS
   =========================================== */

.font-ui {
  font-family: 'Source Serif 4', ui-serif, Georgia, serif;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-normal);
}

.font-label {
  font-family: 'Source Serif 4', ui-serif, Georgia, serif;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-normal);
}

.font-caption {
  font-family: 'Source Serif 4', ui-serif, Georgia, serif;
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
}

/* ===========================================
   KEYBOARD SHORTCUT STYLING
   =========================================== */

.font-kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--text-sm);
  font-weight: 500;
  background-color: rgb(var(--muted));
  padding: 0.25rem 0.5rem;
  border: 1px solid rgb(var(--border));
}

/* ===========================================
   TEXT COLORS
   =========================================== */

.text-foreground {
  color: rgb(var(--foreground));
}

.text-muted {
  color: rgb(var(--muted-foreground));
}

.text-primary {
  color: rgb(var(--primary));
}

.text-accent {
  color: rgb(var(--accent));
}

/* ===========================================
   RESPONSIVE TYPOGRAPHY
   =========================================== */

@media (max-width: 768px) {
  .font-display {
    font-size: calc(var(--text-4xl) * 0.75);  /* Smaller on mobile */
  }

  .font-heading-lg {
    font-size: calc(var(--text-3xl) * 0.85);
  }

  .font-heading {
    font-size: var(--text-xl);
  }
}