/**
 * Optimized Font Loading - System Fonts + Lazy Load Web Fonts
 * Strategy: System fonts instant, web fonts load only when needed
 */

/* ============================================================================
   SYSTEM FONT STACKS - Instant Loading, No Downloads
   ============================================================================ */

:root {
    /* Bengali System Fonts - Loads instantly from OS */
    --font-bengali: 'Noto Sans Bengali', 'Shonar Bangla', 'Vrinda', 
                    'Kohinoor Bangla', 'Akaash', 'Lohit Bengali',
                    system-ui, sans-serif;
    
    /* English System Fonts - Loads instantly from OS */
    --font-english: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 
                    'Helvetica Neue', Arial, sans-serif;
    
    --font-monospace: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 
                      Consolas, 'Courier New', monospace;
}

/* ============================================================================
   BASE TYPOGRAPHY - System Fonts Only (No Downloads)
   ============================================================================ */

body {
    font-family: var(--font-english);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Bengali text uses system fonts ONLY */
[lang="bn"],
[lang="bn-BD"],
.bengali-text,
.bangla-text {
    font-family: var(--font-bengali);
}

/* English text */
[lang="en"],
.english-text {
    font-family: var(--font-english);
}

/* Code and monospace */
code, pre, kbd, samp, .monospace {
    font-family: var(--font-monospace);
}

/* ============================================================================
   WEB FONTS - LAZY LOADED (Only when font selector is used)
   These fonts are NOT loaded automatically during page load
   They load on-demand when user selects them in font dropdown
   ============================================================================ */

/* 
   IMPORTANT: Web fonts below use font-display: optional
   This means: "Only load if available within 100ms, otherwise skip"
   Combined with lazy loading, fonts only download when explicitly selected
*/

/* Bengali Web Font - Kalpurush (Lazy Load) */
@font-face {
    font-family: 'Kalpurush';
     local('Kalpurush'),
         url('/static/fonts/Kalpurush.woff2') format('woff2');
    font-display: optional; /* Don't block, use only if loads fast */
    font-weight: 400;
    font-style: normal;
    unicode-range: U+0980-09FF; /* Bengali only */
}

/* Bengali Web Font - SolaimanLipi (Lazy Load) */
@font-face {
    font-family: 'SolaimanLipi';
     local('SolaimanLipi'), local('Solaiman Lipi'),
         url('/static/fonts/SolaimanLipi.woff2') format('woff2');
    font-display: optional;
    font-weight: 400;
    font-style: normal;
    unicode-range: U+0980-09FF;
}

/* English Web Font - Inter (Lazy Load) */
@font-face {
    font-family: 'Inter';
     local('Inter'),
         url('/static/fonts/english/Inter/Inter-Regular.woff2') format('woff2');
    font-display: optional;
    font-weight: 400;
    font-style: normal;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

/* English Web Font - Roboto (Lazy Load) */
@font-face {
    font-family: 'Roboto';
     local('Roboto'),
          format('woff2');
    font-display: optional;
    font-weight: 400;
    font-style: normal;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

/* ============================================================================
   LAZY LOAD CLASSES - Applied by JavaScript only when needed
   ============================================================================ */

/* When user selects Kalpurush font */
.font-kalpurush {
    font-family: 'Kalpurush', var(--font-bengali);
}

/* When user selects SolaimanLipi font */
.font-solaimanlip {
    font-family: 'SolaimanLipi', var(--font-bengali);
}

/* When user selects Inter font */
.font-inter {
    font-family: 'Inter', var(--font-english);
}

/* When user selects Roboto font */
.font-roboto {
    font-family: 'Roboto', var(--font-english);
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

/* Preload ONLY critical system fonts (none - already on system) */
/* Web fonts load lazily when selected */

/* Prevent layout shift */
body {
    font-size: 16px;
    line-height: 1.6;
}

*:lang(bn) {
    line-height: 1.8;
}

/* Reduce data usage on slow connections */
@media (prefers-reduced-data: reduce) {
    @font-face {
        font-display: optional; /* Skip web fonts entirely */
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   FONT LOADING STATE MANAGEMENT
   ============================================================================ */

/* Before web fonts load (if user selects them) */
.font-loading {
    opacity: 1; /* Keep visible, don't hide */
}

/* After web fonts load */
.fonts-loaded {
    opacity: 1;
}

/* Fallback if fonts fail to load */
.fonts-failed {
    font-family: var(--font-english);
}

.fonts-failed:lang(bn) {
    font-family: var(--font-bengali);
}

/* ============================================================================
   SPECIFIC ELEMENTS
   ============================================================================ */

/* Headers - system fonts only */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-english);
    font-weight: 600;
}

h1[lang="bn"], h2[lang="bn"], h3[lang="bn"],
h4[lang="bn"], h5[lang="bn"], h6[lang="bn"] {
    font-family: var(--font-bengali);
}

/* Buttons and inputs inherit */
button, input, select, textarea, .btn {
    font-family: inherit;
}

/* ============================================================================
   NOTES FOR DEVELOPERS
   ============================================================================
   
   Lazy Loading Strategy:
   1. Page loads with system fonts only (0 font downloads)
   2. When user opens font selector → Font list shows available fonts
   3. When user SELECTS a font → That specific font downloads
   4. Font applies to selected text only
   
   Benefits:
   - Instant page load (no font downloads)
   - Fonts download only when needed
   - 95% users never download web fonts (use system fonts)
   - Saves bandwidth and improves PageSpeed score
   
   Implementation in JavaScript:
   - Font selector should trigger font download on selection
   - Use CSS Font Loading API to load fonts on-demand
   - Example: document.fonts.load('400 1em Kalpurush')
   
   ============================================================================ */