/* Unified Typography System for InsightMeter */
/* This file provides consistent typography across all pages */

/* Base Typography */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #212529;
  font-weight: 400;
}

/* Heading Hierarchy */
h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem 0;
  color: #212529;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.75rem 0;
  color: #212529;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 0.5rem 0;
  color: #212529;
}

h4 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 0.5rem 0;
  color: #212529;
}

h5 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 0.5rem 0;
  color: #212529;
}

h6 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 0.5rem 0;
  color: #212529;
}

/* Paragraphs */
p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1rem 0;
  color: #495057;
}

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

li {
  margin-bottom: 0.5rem;
  color: #495057;
  line-height: 1.6;
}

/* Strong and Bold */
strong, b {
  font-weight: 600;
  color: #212529;
}

/* Links */
a {
  color: #007bff;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* Emphasis */
em, i {
  font-style: italic;
  color: #495057;
}

/* Small text */
small {
  font-size: 0.875rem;
  color: #6c757d;
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: #007bff; }
.text-secondary { color: #6c757d; }
.text-success { color: #28a745; }
.text-warning { color: #ffc107; }
.text-danger { color: #dc3545; }
.text-muted { color: #6c757d; }

.font-weight-light { font-weight: 300; }
.font-weight-normal { font-weight: 400; }
.font-weight-medium { font-weight: 500; }
.font-weight-semibold { font-weight: 600; }
.font-weight-bold { font-weight: 700; }

/* Responsive Typography */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.75rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }
  
  h4 {
    font-size: 1.25rem;
  }
  
  h5 {
    font-size: 1.1rem;
  }
  
  h6 {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
  
  h1 {
    font-size: 1.75rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  h4 {
    font-size: 1.1rem;
  }
  
  h5 {
    font-size: 1rem;
  }
  
  h6 {
    font-size: 0.9rem;
  }
}