/* 
 * SiteHub Typography System
 * Consistent font sizes, scales, and spacing across all apps
 */

/* ====================================
   BASE FONT SIZE NORMALIZATION
   ==================================== */

/* Force consistent base font size across all browsers and devices */
html {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: 1rem !important; /* 16px */
  line-height: 1.6;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* ====================================
   TYPOGRAPHY SCALE
   Based on 16px base, using perfect fourth (1.333) ratio
   ==================================== */

/* Headings */
h1, .h1 {
  font-size: 2.5rem !important;      /* 40px */
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-size: 2rem !important;        /* 32px */
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-size: 1.5rem !important;      /* 24px */
  line-height: 1.3;
  font-weight: 600;
}

h4, .h4 {
  font-size: 1.25rem !important;     /* 20px */
  line-height: 1.4;
  font-weight: 600;
}

h5, .h5 {
  font-size: 1.125rem !important;    /* 18px */
  line-height: 1.5;
  font-weight: 600;
}

h6, .h6 {
  font-size: 1rem !important;        /* 16px */
  line-height: 1.5;
  font-weight: 600;
}

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

@media (max-width: 768px) {
  h1, .h1 {
    font-size: 2rem !important;      /* 32px on mobile */
  }
  
  h2, .h2 {
    font-size: 1.75rem !important;   /* 28px on mobile */
  }
  
  h3, .h3 {
    font-size: 1.375rem !important;  /* 22px on mobile */
  }
}

/* ====================================
   TEXT SIZES (Standardized)
   ==================================== */

.text-display {
  font-size: 3rem !important;        /* 48px - Hero/Display */
  line-height: 1.1;
  font-weight: 700;
}

.text-xxl {
  font-size: 2.5rem !important;      /* 40px */
  line-height: 1.2;
}

.text-xl {
  font-size: 1.5rem !important;      /* 24px */
  line-height: 1.3;
}

.text-lg {
  font-size: 1.125rem !important;    /* 18px */
  line-height: 1.5;
}

.text-base {
  font-size: 1rem !important;        /* 16px - default */
  line-height: 1.6;
}

.text-sm {
  font-size: 0.875rem !important;    /* 14px */
  line-height: 1.5;
}

.text-xs {
  font-size: 0.75rem !important;     /* 12px */
  line-height: 1.4;
}

.text-2xs {
  font-size: 0.6875rem !important;   /* 11px */
  line-height: 1.3;
}

/* ====================================
   TAILWIND CLASS OVERRIDES
   Force consistent sizes even with Tailwind
   ==================================== */

.text-5xl, .text-6xl, .text-7xl {
  font-size: 2.5rem !important;      /* Cap at display size */
  line-height: 1.1 !important;
}

.text-4xl {
  font-size: 2rem !important;        /* 32px */
  line-height: 1.2 !important;
}

.text-3xl {
  font-size: 1.75rem !important;     /* 28px */
  line-height: 1.25 !important;
}

.text-2xl {
  font-size: 1.5rem !important;      /* 24px */
  line-height: 1.3 !important;
}

/* ====================================
   PARAGRAPH & BODY TEXT
   ==================================== */

p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.lead {
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 400;
}

.small, small {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ====================================
   PROSE (Blog & Content)
   ==================================== */

.prose {
  font-size: 1rem !important;
  line-height: 1.75;
  max-width: 65ch;
}

.prose p {
  font-size: 1rem !important;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose h1 {
  font-size: 2.5rem !important;
  margin-top: 0;
  margin-bottom: 0.875em;
}

.prose h2 {
  font-size: 2rem !important;
  margin-top: 2em;
  margin-bottom: 1em;
}

.prose h3 {
  font-size: 1.5rem !important;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}

.prose h4 {
  font-size: 1.25rem !important;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.prose li {
  font-size: 1rem !important;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose code {
  font-size: 0.875rem !important;
}

.prose pre code {
  font-size: 0.875rem !important;
}

/* ====================================
   BUTTONS & UI ELEMENTS
   ==================================== */

button, .btn, a.btn {
  font-size: 1rem !important;
  line-height: 1.5;
  font-weight: 500;
}

.btn-sm {
  font-size: 0.875rem !important;
  line-height: 1.5;
}

.btn-lg {
  font-size: 1.125rem !important;
  line-height: 1.5;
}

/* ====================================
   FORM ELEMENTS
   ==================================== */

input, textarea, select {
  font-size: 1rem !important;
  line-height: 1.5;
}

label {
  font-size: 0.875rem !important;
  font-weight: 500;
  line-height: 1.5;
}

.form-help {
  font-size: 0.875rem !important;
  line-height: 1.4;
}

/* ====================================
   NAVIGATION
   ==================================== */

nav a, .nav-link {
  font-size: 0.875rem !important;
  line-height: 1.5;
  font-weight: 500;
}

.nav-logo {
  font-size: 1.125rem !important;
  font-weight: 700;
}

/* ====================================
   CARDS & COMPONENTS
   ==================================== */

.card-title {
  font-size: 1.25rem !important;
  font-weight: 600;
  line-height: 1.3;
}

.card-subtitle {
  font-size: 1rem !important;
  line-height: 1.5;
}

.card-text {
  font-size: 1rem !important;
  line-height: 1.6;
}

.card-caption {
  font-size: 0.875rem !important;
  line-height: 1.5;
}

/* ====================================
   BADGES & TAGS
   ==================================== */

.badge, .tag {
  font-size: 0.75rem !important;
  line-height: 1.4;
  font-weight: 500;
}

.badge-lg {
  font-size: 0.875rem !important;
}

/* ====================================
   TABLES
   ==================================== */

table {
  font-size: 0.875rem !important;
}

th {
  font-size: 0.875rem !important;
  font-weight: 600;
  line-height: 1.5;
}

td {
  font-size: 0.875rem !important;
  line-height: 1.5;
}

/* ====================================
   CODE BLOCKS
   ==================================== */

code {
  font-size: 0.875rem !important;
  font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
}

pre {
  font-size: 0.875rem !important;
  line-height: 1.6;
}

pre code {
  font-size: 0.875rem !important;
}

/* ====================================
   MOBILE OPTIMIZATIONS
   ==================================== */

@media (max-width: 640px) {
  /* Slightly reduce all text on very small screens */
  html {
    font-size: 15px !important;
  }
  
  .text-display {
    font-size: 2rem !important;     /* 32px on mobile */
  }
  
  .text-xxl {
    font-size: 1.75rem !important;  /* 28px on mobile */
  }
}

/* ====================================
   PRINT STYLES
   ==================================== */

@media print {
  html {
    font-size: 12pt !important;
  }
  
  body {
    font-size: 12pt !important;
    line-height: 1.5;
  }
  
  h1 { font-size: 24pt !important; }
  h2 { font-size: 20pt !important; }
  h3 { font-size: 16pt !important; }
  h4 { font-size: 14pt !important; }
  h5 { font-size: 12pt !important; }
  h6 { font-size: 12pt !important; }
}

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

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

.tracking-tight { letter-spacing: -0.02em !important; }
.tracking-normal { letter-spacing: 0 !important; }
.tracking-wide { letter-spacing: 0.025em !important; }

.leading-tight { line-height: 1.25 !important; }
.leading-normal { line-height: 1.5 !important; }
.leading-relaxed { line-height: 1.75 !important; }