/* ============================================================
   Figma-Like Design System — Typography System
   Fonts: Poppins (Headings) + Inter (Body Text)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --tracking-tight: -0.03em;
  --tracking-normal: 0em;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.12em;
}

body {
  font-family: var(--font-body);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.6;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  line-height: 1.2;
}

/* Fluid Typography Scaling */
.display-title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
}

.page-title {
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  font-weight: 800;
}

.section-heading {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 800;
}

.card-heading {
  font-size: clamp(1.125rem, 2.5vw, 1.35rem);
  font-weight: 700;
}

.badge-text {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}