/*
 * Section 508 Compliant Typography
 * Based on guidelines from https://www.section508.gov/develop/fonts-typography/
 * 
 * Key requirements:
 * - Sans-serif fonts for body text
 * - Minimum 16px (1rem) for body text
 * - Text scalable to 200% without loss of content
 * - Proper line spacing for readability
 * - WCAG AA contrast ratios (4.5:1 normal, 3:1 large text)
 */

/* Base Typography Reset */
:root {
  /* Font sizes using rem for scalability */
  --font-size-xs: 0.875rem;    /* 14px - Use sparingly, only for labels/captions */
  --font-size-sm: 0.9375rem;   /* 15px */
  --font-size-base: 1rem;      /* 16px - Minimum for body text */
  --font-size-md: 1.125rem;    /* 18px */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-xl: 1.5rem;      /* 24px */
  --font-size-2xl: 1.875rem;   /* 30px */
  --font-size-3xl: 2.25rem;    /* 36px */
  
  /* Line heights for readability */
  --line-height-tight: 1.25;
  --line-height-base: 1.5;     /* WCAG recommended */
  --line-height-relaxed: 1.75;
  
  /* Font families - Sans-serif for accessibility */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Roboto Mono", "Courier New", monospace;
  
  /* Spacing */
  --paragraph-spacing: 1.5rem;
  --heading-spacing: 0.5em;
}

/* Global font settings */
html {
  /* Enables smooth font scaling */
  font-size: 100%; /* 16px browser default */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: #212529; /* Dark gray for better contrast */
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings - Serif acceptable, clear hierarchy */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans); /* Can use serif if desired */
  font-weight: 600;
  line-height: var(--line-height-tight);
  margin-top: var(--heading-spacing);
  margin-bottom: var(--heading-spacing);
  color: #212529;
}

h1 {
  font-size: var(--font-size-3xl);
  font-weight: 700;
}

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

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

h4 {
  font-size: var(--font-size-lg);
}

h5 {
  font-size: var(--font-size-md);
}

h6 {
  font-size: var(--font-size-base);
  font-weight: 700;
}

/* Paragraphs and body text */
p {
  margin-bottom: var(--paragraph-spacing);
  max-width: 70ch; /* Optimal reading length */
}

/* Links - Ensure proper contrast and underlines */
a {
  color: #0066cc; /* WCAG AA compliant blue */
  text-decoration: underline;
  text-underline-offset: 0.125em;
}

a:hover,
a:focus {
  color: #0052a3;
  text-decoration: underline;
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

a:visited {
  color: #551a8b; /* WCAG AA compliant purple */
}

/* Lists */
ul, ol {
  margin-bottom: var(--paragraph-spacing);
  padding-left: 2rem;
}

li {
  margin-bottom: 0.5rem;
  line-height: var(--line-height-base);
}

/* Emphasis and strong text */
em, i {
  font-style: normal;
  font-weight: 600; /* Use bold instead of italics for emphasis */
  /* Section 508: Italics avoided for better readability */
}

strong, b {
  font-weight: 700;
  color: inherit;
}

/* Code and preformatted text */
code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.9375em; /* Slightly smaller but still readable */
}

pre {
  margin-bottom: var(--paragraph-spacing);
  padding: 1rem;
  overflow-x: auto;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
}

/* Blockquotes */
blockquote {
  margin: 0 0 var(--paragraph-spacing);
  padding-left: 1.5rem;
  border-left: 4px solid #dee2e6;
  font-size: var(--font-size-md);
}

/* Small text - Use sparingly */
small,
.text-small {
  font-size: var(--font-size-sm);
  /* Ensure this is only used for non-essential information */
}

/* Utility classes for font sizes */
.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); }

/* Line height utilities */
.leading-tight { line-height: var(--line-height-tight); }
.leading-base { line-height: var(--line-height-base); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

/* Responsive font scaling */
@media (min-width: 768px) {
  :root {
    --font-size-base: 1.125rem; /* 18px on larger screens */
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  body {
    color: #000000;
    background-color: #ffffff;
  }
  
  a {
    color: #0000ee;
    text-decoration: underline;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    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;
    color: #000;
    background: #fff;
  }
  
  h1 { font-size: 24pt; }
  h2 { font-size: 18pt; }
  h3 { font-size: 14pt; }
  
  a {
    text-decoration: underline;
    color: #000;
  }
}