/* ==========================================
   ICCAN GLOBAL TYPOGRAPHY STANDARD
   Unified font sizing and hierarchy for all pages
   ========================================== */

:root {
  /* Typography Scale */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 0.9375rem;  /* 15px - Global body standard */
  --font-size-md: 1rem;         /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.375rem;     /* 22px */
  --font-size-2xl: 1.75rem;     /* 28px */
  --font-size-3xl: 2.25rem;     /* 36px */
  --font-size-4xl: 2.75rem;     /* 44px */

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 1.8;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.15em;
}

/* ==========================================
   BASE TYPOGRAPHY RULES
   ========================================== */

html {
  font-size: 16px;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  color: #102137;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   HEADING STYLES - Global Standards
   ========================================== */

h1, .h1 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(2.25rem, 8vw, 3rem);
  font-weight: 700;
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: #102137;
}

h2, .h2 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  font-weight: 600;
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: #102137;
}

h3, .h3 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(1.125rem, 3vw, 1.625rem);
  font-weight: 600;
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: #102137;
}

h4, .h4 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-normal);
  margin: 0;
  color: #102137;
}

h5, .h5 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-normal);
  margin: 0;
  color: #102137;
}

h6, .h6 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-normal);
  margin: 0;
  color: #102137;
}

/* ==========================================
   PARAGRAPH & TEXT ELEMENTS
   ========================================== */

p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  margin: 0 0 1rem 0;
  color: #102137;
}

p.lead, .lead {
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: var(--line-height-loose);
  color: #1d3850;
}

small, .small {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: #738092;
}

mark, .highlight {
  background-color: #ffd89b;
  padding: 2px 4px;
  border-radius: 2px;
}

strong, b {
  font-weight: 600;
  color: #1d3850;
}

em, i {
  font-style: italic;
}

/* ==========================================
   LIST STYLES
   ========================================== */

ul, ol {
  margin: 0 0 1.5rem 0;
  padding-left: 1.5rem;
  line-height: var(--line-height-loose);
}

li {
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  margin-bottom: 0.75rem;
  color: #102137;
}

li small {
  font-size: 0.875rem;
  color: #738092;
  margin-top: 0.25rem;
  display: block;
}

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

a {
  color: #216b82;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #329fa9;
  text-decoration: underline;
}

a.button, button {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

/* ==========================================
   UTILITY CLASSES - For flexible sizing
   ========================================== */

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.tracking-wider { letter-spacing: var(--tracking-wider); }
.tracking-widest { letter-spacing: var(--tracking-widest); }

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

/* ==========================================
   PAGE-SPECIFIC OVERRIDES
   ========================================== */

/* Subpage hero sections */
.page-hero p {
  font-size: var(--font-size-md);
  line-height: var(--line-height-loose);
  color: #c0d0db;
}

/* Card content standardization */
.card p, [class*="card"] p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
}

.card h3, [class*="card"] h3 {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
}

.card h4, [class*="card"] h4 {
  font-size: var(--font-size-md);
  line-height: var(--line-height-snug);
}

/* List items in cards */
.card li, [class*="card"] li {
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
}

/* Navigation */
nav a, .nav-link {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* Labels and badges */
.label, .badge, .tag {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
}

/* Breadcrumbs */
.breadcrumb, .crumb {
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
}

/* Captions */
figcaption, .caption {
  font-size: 0.875rem;
  line-height: var(--line-height-normal);
  color: #738092;
}

/* Metadata */
.meta, .metadata {
  font-size: var(--font-size-xs);
  color: #87939c;
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */

@media (max-width: 760px) {
  html {
    font-size: 15px;
  }

  h1, .h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  h2, .h2 {
    font-size: clamp(1.5rem, 4vw, 1.875rem);
  }

  h3, .h3 {
    font-size: clamp(1rem, 2.5vw, 1.375rem);
  }

  p {
    font-size: 14px;
    line-height: var(--line-height-loose);
  }

  p.lead, .lead {
    font-size: 15px;
  }

  li {
    font-size: 14px;
    line-height: var(--line-height-loose);
  }

  .page-hero p {
    font-size: 15px;
  }
}

@media (max-width: 600px) {
  html {
    font-size: 14px;
  }

  h1, .h1 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  h2, .h2 {
    font-size: clamp(1.25rem, 3.5vw, 1.625rem);
  }

  h3, .h3 {
    font-size: clamp(0.875rem, 2vw, 1.125rem);
  }

  h4, .h4 {
    font-size: 1rem;
  }

  p {
    font-size: 13px;
    line-height: var(--line-height-loose);
  }

  p.lead, .lead {
    font-size: 14px;
  }

  li {
    font-size: 13px;
    line-height: var(--line-height-loose);
  }

  small {
    font-size: 11px;
  }

  .page-hero p {
    font-size: 14px;
  }
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */

/* Ensure sufficient contrast */
body {
  color: #102137; /* WCAG AA compliant: 8.2:1 ratio on white */
}

.text-muted {
  color: #738092; /* WCAG AA compliant: 5.1:1 ratio on white */
}

/* Prevent text scaling issues */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

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

@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  p {
    orphans: 3;
    widows: 3;
  }
}