/* =========================
   Typography System
   ========================= */

/* Font Family Definitions */
:root {
  /* Primary Font Stack - Modern & Professional */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Monospace Font Stack - For Code/Technical */
  --font-mono: 'Menlo', 'Monaco', 'Courier New', monospace;
  
  /* Font Weight Scale - Only 3 weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Height Scale */
  --line-height-tight: 1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;
  
  /* Font Size Scale - Consistent & Scalable */
  /* Mobile First Approach */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px - H3 */
  --text-3xl: 2rem;      /* 32px - H2 */
  --text-4xl: 2.5rem;    /* 40px - H1 */
  --text-5xl: 3rem;      /* 48px */
  --text-6xl: 3.5rem;    /* 56px - Display Large */
}

/* =========================
   HEADINGS
   ========================= */

/* H1 - Page Title / Hero Title */
h1, .h1 {
  font-family: var(--font-primary);
  font-size: var(--text-4xl);           /* 40px / 2.5rem */
  font-weight: var(--font-weight-bold); /* 700 */
  line-height: var(--line-height-tight); /* 1.3 */
  margin-bottom: 1rem;
  color: #1f2937;
  letter-spacing: -0.5px;
}

/* H2 - Section Title */
h2, .h2 {
  font-family: var(--font-primary);
  font-size: var(--text-3xl);           /* 32px / 2rem */
  font-weight: var(--font-weight-bold); /* 700 */
  line-height: var(--line-height-tight); /* 1.3 */
  margin-bottom: 1rem;
  color: #1f2937;
  letter-spacing: -0.25px;
}

/* H3 - Subsection Title */
h3, .h3 {
  font-family: var(--font-primary);
  font-size: var(--text-2xl);           /* 24px / 1.5rem */
  font-weight: var(--font-weight-bold); /* 700 */
  line-height: var(--line-height-tight); /* 1.3 */
  margin-bottom: 0.75rem;
  color: #1f2937;
  letter-spacing: -0.125px;
}

/* H4 - Minor Heading */
h4, .h4 {
  font-family: var(--font-primary);
  font-size: var(--text-xl);            /* 20px / 1.25rem */
  font-weight: var(--font-weight-bold); /* 700 */
  line-height: var(--line-height-normal); /* 1.6 */
  margin-bottom: 0.5rem;
  color: #1f2937;
}

/* H5 - Visual Hierarchy */
h5, .h5 {
  font-family: var(--font-primary);
  font-size: var(--text-lg);            /* 18px / 1.125rem */
  font-weight: var(--font-weight-semibold); /* 600 */
  line-height: var(--line-height-normal); /* 1.6 */
  margin-bottom: 0.5rem;
  color: #1f2937;
}

/* H6 - Minimal Heading */
h6, .h6 {
  font-family: var(--font-primary);
  font-size: var(--text-base);          /* 16px / 1rem */
  font-weight: var(--font-weight-semibold); /* 600 */
  line-height: var(--line-height-normal); /* 1.6 */
  margin-bottom: 0.5rem;
  color: #1f2937;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

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

/* Base Body Text */
body, p, .p-base {
  font-family: var(--font-primary);
  font-size: var(--text-base);          /* 16px / 1rem */
  font-weight: var(--font-weight-regular); /* 400 */
  line-height: var(--line-height-normal); /* 1.6 */
  color: #374151;
  margin-bottom: 1rem;
}

/* Body - Large */
p.text-lg, .text-lg {
  font-size: var(--text-lg);            /* 18px / 1.125rem */
  font-weight: var(--font-weight-regular); /* 400 */
}

/* Body - Small */
p.text-sm, .text-sm {
  font-size: var(--text-sm);            /* 14px / 0.875rem */
  font-weight: var(--font-weight-regular); /* 400 */
}

/* Body - Extra Small */
p.text-xs, .text-xs {
  font-size: var(--text-xs);            /* 12px / 0.75rem */
  font-weight: var(--font-weight-regular); /* 400 */
}

/* =========================
   EMPHASIS / STRONG TEXT
   ========================= */

/* Strong / Bold */
strong, b, .font-semibold, .font-bold {
  font-weight: var(--font-weight-bold); /* 700 */
}

.font-semibold {
  font-weight: var(--font-weight-semibold); /* 600 */
}

.font-regular {
  font-weight: var(--font-weight-regular); /* 400 */
}

/* =========================
   LABELS & FORM TEXT
   ========================= */

/* Form Labels */
label, .label {
  font-family: var(--font-primary);
  font-size: var(--text-sm);            /* 14px / 0.875rem */
  font-weight: var(--font-weight-semibold); /* 600 */
  line-height: var(--line-height-normal); /* 1.6 */
  color: #1f2937;
  display: block;
  margin-bottom: 0.5rem;
}

/* Input/Form Control Text */
input, textarea, select {
  font-family: var(--font-primary);
  font-size: var(--text-base);          /* 16px / 1rem */
  font-weight: var(--font-weight-regular); /* 400 */
  line-height: var(--line-height-normal); /* 1.6 */
}

/* =========================
   BUTTON TEXT
   ========================= */

/* Button Default */
button, .btn, a.btn {
  font-family: var(--font-primary);
  font-size: var(--text-base);          /* 16px / 1rem */
  font-weight: var(--font-weight-semibold); /* 600 */
  line-height: var(--line-height-tight); /* 1.3 */
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
}

/* Button Large */
.btn-lg {
  font-size: var(--text-lg);            /* 18px / 1.125rem */
}

/* Button Small */
.btn-sm {
  font-size: var(--text-sm);            /* 14px / 0.875rem */
  font-weight: var(--font-weight-semibold); /* 600 */
}

/* =========================
   MONOSPACE / CODE
   ========================= */

/* Code Block */
code, pre, .font-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);            /* 14px / 0.875rem */
  font-weight: var(--font-weight-regular); /* 400 */
  line-height: var(--line-height-relaxed); /* 1.8 */
}

/* Inline Code */
code {
  background: #f3f4f6;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  color: #dc2626;
}

/* =========================
   SMALL TEXT / HELPER TEXT
   ========================= */

/* Small Text (12px) */
small, .small, .helper-text {
  font-family: var(--font-primary);
  font-size: var(--text-xs);            /* 12px / 0.75rem */
  font-weight: var(--font-weight-regular); /* 400 */
  line-height: var(--line-height-normal); /* 1.6 */
  color: #6b7280;
}

/* Helper Text - Muted */
.text-muted {
  color: #9ca3af;
  font-size: var(--text-sm);            /* 14px / 0.875rem */
}

/* Text Tiny */
.text-tiny {
  font-size: var(--text-xs);            /* 12px / 0.75rem */
  color: #9ca3af;
  font-weight: var(--font-weight-regular); /* 400 */
}

/* =========================
   LINK STYLES
   ========================= */

a, .link {
  font-family: var(--font-primary);
  font-size: inherit;
  font-weight: var(--font-weight-regular); /* 400 */
  color: #3b82f6;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover, .link:hover {
  color: #2563eb;
  text-decoration: underline;
}

/* Link Bold */
a.font-semibold, .link.font-semibold {
  font-weight: var(--font-weight-semibold); /* 600 */
}

/* =========================
   BADGE & CHIP TEXT
   ========================= */

.badge, .chip, .tag {
  font-family: var(--font-primary);
  font-size: var(--text-xs);            /* 12px / 0.75rem */
  font-weight: var(--font-weight-semibold); /* 600 */
  line-height: var(--line-height-tight); /* 1.3 */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* =========================
   DISPLAY TEXT (Large Showcase)
   ========================= */

.display-lg, .text-6xl {
  font-family: var(--font-primary);
  font-size: var(--text-6xl);           /* 56px / 3.5rem */
  font-weight: var(--font-weight-bold); /* 700 */
  line-height: var(--line-height-tight); /* 1.3 */
  letter-spacing: -1px;
}

.display-md, .text-5xl {
  font-family: var(--font-primary);
  font-size: var(--text-5xl);           /* 48px / 3rem */
  font-weight: var(--font-weight-bold); /* 700 */
  line-height: var(--line-height-tight); /* 1.3 */
  letter-spacing: -0.75px;
}

/* =========================
   UTILITY CLASSES
   ========================= */

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Text Decoration */
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* Font Weight Utilities */
.font-light { font-weight: 300; }
.font-normal { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: 800; }

/* Font Style */
.italic { font-style: italic; }
.not-italic { font-style: normal; }

/* Line Height Utilities */
.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

/* Letter Spacing */
.tracking-tight { letter-spacing: -0.5px; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.5px; }
.tracking-wider { letter-spacing: 1px; }

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

@media (max-width: 768px) {
  h1, .h1 {
    font-size: var(--text-3xl);         /* 32px on mobile */
  }
  
  h2, .h2 {
    font-size: var(--text-2xl);         /* 24px on mobile */
  }
  
  h3, .h3 {
    font-size: var(--text-xl);          /* 20px on mobile */
  }
  
  h4, .h4 {
    font-size: var(--text-lg);          /* 18px on mobile */
  }
  
  .display-lg {
    font-size: var(--text-5xl);         /* 48px on mobile */
  }
  
  .display-md {
    font-size: var(--text-4xl);         /* 40px on mobile */
  }
}

@media (max-width: 480px) {
  h1, .h1 {
    font-size: var(--text-2xl);         /* 24px on small mobile */
    margin-bottom: 0.75rem;
  }
  
  h2, .h2 {
    font-size: var(--text-xl);          /* 20px on small mobile */
    margin-bottom: 0.5rem;
  }
  
  h3, .h3 {
    font-size: var(--text-lg);          /* 18px on small mobile */
  }
  
  p {
    font-size: var(--text-sm);          /* 14px on small mobile */
  }
  
  .display-lg {
    font-size: var(--text-4xl);         /* 40px on small mobile */
  }
  
  .display-md {
    font-size: var(--text-3xl);         /* 32px on small mobile */
  }
}