/**
 * Critical Font CSS for DM Sans and DM Serif Display
 * Optimized for performance and Core Web Vitals
 *
 * This file provides immediate font definitions to prevent FOIT (Flash of Invisible Text)
 * and ensures consistent typography rendering while Google Fonts load asynchronously
 */

/* DM Sans - Regular (400) */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* Use local fonts if available for instant loading */
  src: local('DM Sans Regular'),
       local('DMSans-Regular'),
       /* Updated to working Google Fonts CDN URL */
       url('https://fonts.gstatic.com/s/dmsans/v16/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAopxhTg.ttf') format('truetype');
  /* Optimized for Latin character set - covers 99% of English content */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Sans - Medium (500) */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('DM Sans Medium'),
       local('DMSans-Medium'),
       url('https://fonts.gstatic.com/s/dmsans/v16/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAkJxhTg.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Sans - SemiBold (600) */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('DM Sans SemiBold'),
       local('DMSans-SemiBold'),
       url('https://fonts.gstatic.com/s/dmsans/v16/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAfJthTg.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Sans - Bold (700) */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('DM Sans Bold'),
       local('DMSans-Bold'),
       url('https://fonts.gstatic.com/s/dmsans/v16/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwARZthTg.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Serif Display - Regular (400) */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('DM Serif Display'),
       local('DMSerifDisplay-Regular'),
       url('https://fonts.gstatic.com/s/dmserif/v12/KFOlCnqEu92Fr1Mu51S2TxXVEdA.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Serif Display - Italic */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('DM Serif Display Italic'),
       local('DMSerifDisplay-Italic'),
       url('https://fonts.gstatic.com/s/dmserif/v12/KFOjCnqEu92Fr1Mu51TjURXRdQPKA.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/**
 * Performance-optimized font family definitions
 * These ensure immediate rendering with system fallbacks while Google Fonts load
 */

/* Primary font stack - optimized for educational content */
.font-dm-sans,
body,
.text-body,
.prose {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Helvetica Neue', sans-serif;
  font-optical-sizing: auto;
  font-variation-settings: normal;
}

/* Display font stack - for headings and emphasis */
.font-dm-serif,
h1, h2, h3, h4, h5, h6,
.heading,
.display-text {
  font-family: 'DM Serif Display', 'Times New Roman', 'Georgia', 'Cambria', 'Times', serif;
  font-optical-sizing: auto;
  font-variation-settings: normal;
}

/**
 * Font loading performance optimizations
 */

/* Prevent layout shift during font swap */
body {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Optimize font rendering for Retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/**
 * Critical font sizes for educational content
 * These prevent cumulative layout shift (CLS) during font loading
 */

/* Base text sizes with consistent line heights */
body {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
}

/* Heading hierarchy with perfect 8px grid spacing */
h1 { font-size: 2.25rem; line-height: 1.333; font-weight: 400; margin: 0 0 1.5rem 0; }   /* 36px → 48px line-height, 24px margin */
h2 { font-size: 1.875rem; line-height: 1.6; font-weight: 400; margin: 0 0 1rem 0; }      /* 30px → 48px line-height, 16px margin */
h3 { font-size: 1.5rem; line-height: 1.667; font-weight: 500; margin: 0 0 1rem 0; }      /* 24px → 40px line-height, 16px margin */
h4 { font-size: 1.25rem; line-height: 1.6; font-weight: 500; margin: 0 0 1rem 0; }       /* 20px → 32px line-height, 16px margin */
h5 { font-size: 1.125rem; line-height: 1.778; font-weight: 600; margin: 0 0 0.5rem 0; }  /* 18px → 32px line-height, 8px margin */
h6 { font-size: 1rem; line-height: 1.5; font-weight: 600; margin: 0 0 0.5rem 0; }        /* 16px → 24px line-height (already perfect), 8px margin */

/* Paragraph spacing for perfect 8px grid readability */
p {
  margin: 0 0 1rem 0;    /* 16px margin - 8px grid compliant */
  line-height: 1.5;      /* 16px → 24px line-height (3 × 8px) - perfect grid alignment */
}

/**
 * Responsive font scaling for optimal readability across devices
 */
@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.125rem; }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  h1 { font-size: 1.625rem; }
  h2 { font-size: 1.375rem; }
  h3 { font-size: 1.125rem; }
}

/**
 * Dark mode font adjustments for better readability
 * Explicit .dark class only (no auto-switching)
 */
.dark body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * High contrast mode font optimizations
 */
@media (prefers-contrast: high) {
  body {
    font-weight: 500;
    text-shadow: none;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
  }
}

/**
 * Reduced motion preferences - disable font animation effects
 */
@media (prefers-reduced-motion: reduce) {
  * {
    font-variation-settings: normal !important;
    transition: none !important;
  }
}