/* Font Loading and Typography System */

/* Font Face Declarations with Progressive Enhancement */
@font-face {
  font-family: 'Inter-Local';
  src: local('Inter'), local('Inter-Regular'),
       url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter-Local';
  src: local('Inter Medium'), local('Inter-Medium'),
       url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fAZ9hiA.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter-Local';
  src: local('Inter SemiBold'), local('Inter-SemiBold'),
       url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYAZ9hiA.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter-Local';
  src: local('Inter Bold'), local('Inter-Bold'),
       url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYAZ9hiA.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Font Loading States */
.font-loading {
    font-family: var(--font-fallback);
    opacity: 0.8;
}

.font-loaded {
    font-family: var(--font-primary);
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Font Loading Indicator */
.font-loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.95), rgba(147, 51, 234, 0.95));
    color: white;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.font-loading-indicator.show {
    transform: translateY(0);
}

.font-loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.font-loading-text {
    font-family: system-ui, -apple-system, sans-serif;
}

/* Hide indicator when fonts are loaded */
.font-loaded .font-loading-indicator {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Font Performance Optimizations */
.font-loaded {
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography Scale with Fallback Considerations */
.text-display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.text-heading {
  font-family: var(--font-primary);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.text-body {
  font-family: var(--font-primary);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}

.text-caption {
  font-family: var(--font-primary);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Font Loading Error Recovery */
@media (max-width: 768px) {
  .font-loading {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .font-loading *,
  .font-loaded * {
    transition: none !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .font-loaded {
    font-weight: 600;
    text-shadow: none;
  }
}

/* Font Loading Indicator (Optional) */
.font-loading-indicator {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.font-loading .font-loading-indicator {
  opacity: 1;
}

/* Critical Font Styles for FOUT Prevention */
.critical-text {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.font-loaded .critical-text {
  font-family: var(--font-primary);
}

/* Font Metrics Matching for Better FOUT */
.font-loading h1,
.font-loading h2,
.font-loading h3,
.font-loading h4,
.font-loading h5,
.font-loading h6 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  /* font-size-adjust: 0.5; */ /* Removed for Chrome/Edge/Opera compatibility */
}

.font-loaded h1,
.font-loaded h2,
.font-loaded h3,
.font-loaded h4,
.font-loaded h5,
.font-loaded h6 {
  font-family: var(--font-display);
  /* font-size-adjust: auto; */ /* Removed for Chrome/Edge/Opera compatibility */
}

/* Button and Interactive Element Fonts */
.font-loading .btn,
.font-loading .answer-option,
.font-loading .difficulty-option {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.font-loaded .btn,
.font-loaded .answer-option,
.font-loaded .difficulty-option {
  font-family: var(--font-primary);
}

/* Font Loading Success Animation */
@keyframes fontLoadSuccess {
  from {
    opacity: 0.8;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.font-loaded {
  animation: fontLoadSuccess 0.3s ease-out;
}

/* Preload Font Hint */
.preload-font-hint {
  font-family: var(--font-primary);
  position: absolute;
  left: -9999px;
  top: -9999px;
  visibility: hidden;
  font-weight: 400;
}

.preload-font-hint::after {
  content: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  font-weight: 500;
}

.preload-font-hint::before {
  content: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  font-weight: 600;
}