/* ==========================================
   Typography System
   Mobile-first responsive typography
   ========================================== */

:root {
  /* Font Family Stack - Best practice for global consistency */
  --font-family-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                        Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "Fira Code", "Courier New", monospace;

  /* Font Sizes - Mobile first, scale up */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* Letter Spacing */
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
}

/* ===== BASE TYPOGRAPHY ===== */
html {
  font-family: var(--font-family-system);
  font-size: 16px;
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}

/* ===== HEADINGS ===== */
h1, .h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: 1.5rem 0 1rem 0;
}

h2, .h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: 1.25rem 0 0.875rem 0;
}

h3, .h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  margin: 1rem 0 0.75rem 0;
}

h4, .h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  margin: 0.875rem 0 0.625rem 0;
}

h5, .h5 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin: 0.75rem 0 0.5rem 0;
}

h6, .h6 {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  margin: 0.625rem 0 0.375rem 0;
}

/* ===== BODY TEXT ===== */
p, .body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  margin: 1rem 0;
}

.body-sm {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.body-lg {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

/* ===== SMALL TEXT ===== */
small, .small, .caption {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
}

.caption {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* ===== EMPHASIS ===== */
strong, .font-semibold {
  font-weight: var(--font-weight-semibold);
}

em, .font-italic {
  font-style: italic;
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.font-extrabold {
  font-weight: var(--font-weight-extrabold);
}

.font-light {
  font-weight: var(--font-weight-light);
}

/* ===== CODE ===== */
code, pre {
  font-family: var(--font-family-mono);
  font-size: 0.875em;
  background-color: var(--color-bg-secondary);
  border-radius: 0.25rem;
}

code {
  padding: 0.125rem 0.375rem;
}

pre {
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
}

pre code {
  background-color: transparent;
  padding: 0;
}

/* ===== LISTS ===== */
ul, ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

li {
  margin: 0.5rem 0;
  line-height: var(--line-height-relaxed);
}

/* ===== LINKS ===== */
a {
  color: var(--color-primary-600);
  text-decoration: underline;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary-700);
}

a:active {
  color: var(--color-primary-800);
}

/* ===== BLOCKQUOTE ===== */
blockquote {
  padding-left: 1rem;
  border-left: 4px solid var(--color-border-default);
  margin: 1rem 0;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* ===== HORIZONTAL RULE ===== */
hr {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: 2rem 0;
}

/* ===== TABLET (≥768px) ===== */
@media (min-width: 768px) {
  h1, .h1 {
    font-size: var(--font-size-3xl);
  }

  h2, .h2 {
    font-size: var(--font-size-2xl);
  }

  h3, .h3 {
    font-size: var(--font-size-xl);
  }

  .body-lg {
    font-size: 1.125rem;
  }
}

/* ===== DESKTOP (≥1024px) ===== */
@media (min-width: 1024px) {
  h1, .h1 {
    font-size: var(--font-size-4xl);
  }

  h2, .h2 {
    font-size: var(--font-size-3xl);
  }

  h3, .h3 {
    font-size: var(--font-size-2xl);
  }

  p, .body {
    font-size: 1.0625rem;
    line-height: var(--line-height-relaxed);
  }
}