/* ============================================================
   Moventraxio — mx-fonts.css
   Google Fonts imports and typography utilities
   ============================================================ */

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

/* ── Font Utilities ── */
.mx-font-display { font-family: 'Rajdhani', sans-serif; }
.mx-font-body { font-family: 'DM Sans', sans-serif; }
.mx-font-mono { font-family: 'JetBrains Mono', monospace; }

/* ── Weight ── */
.mx-fw-300 { font-weight: 300; }
.mx-fw-400 { font-weight: 400; }
.mx-fw-500 { font-weight: 500; }
.mx-fw-600 { font-weight: 600; }
.mx-fw-700 { font-weight: 700; }

/* ── Color ── */
.mx-text-cyan { color: var(--mx-accent-cyan); }
.mx-text-purple { color: var(--mx-accent-purple); }
.mx-text-green { color: var(--mx-accent-green); }
.mx-text-orange { color: var(--mx-accent-orange); }
.mx-text-muted { color: var(--mx-text-muted); }
.mx-text-secondary { color: var(--mx-text-secondary); }
.mx-text-primary { color: var(--mx-text-primary); }

/* ── Size ── */
.mx-text-xs { font-size: 0.75rem; }
.mx-text-sm { font-size: 0.875rem; }
.mx-text-base { font-size: 1rem; }
.mx-text-lg { font-size: 1.125rem; }
.mx-text-xl { font-size: 1.25rem; }
.mx-text-2xl { font-size: 1.5rem; }
.mx-text-3xl { font-size: 1.875rem; }

/* ── Letter Spacing ── */
.mx-ls-wide { letter-spacing: 0.1em; }
.mx-ls-wider { letter-spacing: 0.15em; }
.mx-ls-widest { letter-spacing: 0.2em; }

/* ── Special styles ── */
.mx-uppercase { text-transform: uppercase; }
.mx-italic { font-style: italic; }

.mx-gradient-text {
  background: linear-gradient(135deg, var(--mx-accent-cyan), var(--mx-accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mx-gradient-text-warm {
  background: linear-gradient(135deg, var(--mx-accent-orange), #f43f5e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Lead text ── */
.mx-lead {
  font-size: 1.1rem;
  color: var(--mx-text-secondary);
  line-height: 1.85;
}

/* ── Article Typography ── */
.mx-article-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2rem;
  font-size: 0.82rem;
  color: var(--mx-text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.mx-article-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.mx-article-meta i {
  color: var(--mx-accent-cyan);
}