/* ─────────────────────────────────────────────────
   Typography Stylesheet — Vlad Hulin Portfolio
───────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

/* Font Family Design Tokens */
:root {
  --font-display: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-body: 'Mona Sans', -apple-system, sans-serif;
  --font-mono: 'Source Code Pro', monospace;
}

/* ─────────────────────────────────────────────────
   Base Font Assignments & Helper Classes
───────────────────────────────────────────────── */
h1,
h2,
.font-heading,
.font-jakarta {
  font-family: var(--font-display) !important;
  letter-spacing: -0.03em;
}

.font-sans {
  font-family: var(--font-body) !important;
}

.font-mono,
[class*="font-mono"] {
  font-family: var(--font-mono) !important;
}

/* ─────────────────────────────────────────────────
   Standardized Typography Scale System
───────────────────────────────────────────────── */
.type-hero,
.hero-headline {
  font-family: var(--font-display) !important;
  font-size: clamp(2.75rem, 5vw + 1rem, 5.25rem) !important;
  font-weight: 500 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
  color: var(--text-display) !important;
}

.type-h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.85rem, 3vw + 0.5rem, 2.5rem) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.030em !important;
  color: var(--text-primary) !important;
}

.type-h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.5rem, 2.5vw, 2.125rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: var(--text-primary) !important;
}

.type-h3 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.125rem, 1.5vw, 1.35rem) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.020em !important;
  color: var(--text-primary) !important;
}

.type-h4,
.type-card-title {
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  /* 12px */
  font-weight: 700 !important;
  line-height: 1.40 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

.type-body-lg {
  font-family: var(--font-body) !important;
  font-size: 1.125rem !important;
  /* 18px */
  font-weight: 400 !important;
  line-height: 1.60 !important;
  letter-spacing: -0.010em !important;
  color: var(--text-secondary) !important;
}

.type-body {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  /* 14px */
  font-weight: 400 !important;
  line-height: 1.60 !important;
  color: var(--text-secondary) !important;
}

.type-body-sm {
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important;
  /* 13px */
  font-weight: 400 !important;
  line-height: 1.50 !important;
  color: var(--text-secondary) !important;
}

.type-mono-meta {
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  /* 12px */
  font-weight: 500 !important;
  line-height: 1.50 !important;
  letter-spacing: 0.020em !important;
  color: var(--text-primary) !important;
}

.type-caption {
  font-family: var(--font-mono) !important;
  font-size: 0.6875rem !important;
  /* 11px */
  font-weight: 400 !important;
  line-height: 1.40 !important;
  letter-spacing: 0.020em !important;
  color: var(--text-subtle) !important;
}