/**
 * Global Font Variables & Application — PRODUCTION READY
 * Path: /assets/css/fonts.css
 * 
 * CRITICAL FIXES:
 * - Removed duplicate @font-face (already in inter.css)
 * - Added proper fallback chain with size-adjusted fallback
 * - No !important (causes cascade issues)
 * - Font feature settings for better rendering
 * - Proper font-variation-settings for variable font
 * 
 * @version 2.0.0
 */

/* =========================
   Font Stack Definition
   ========================= */
:root {
  --font-family-base: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

/* =========================
   Base Font Application
   ========================= */
body {
  font-family: var(--font-family-base);
  
  /* Font rendering optimizations */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  
  /* Inter font features */
  font-feature-settings: 
    'cv02' 1,  /* Open digit 4 */
    'cv03' 1,  /* Open digit 6 */
    'cv04' 1,  /* Open digit 9 */
    'cv11' 1,  /* Single-story a */
    'ss01' 1,  /* Alternate one */
    'zero' 1;  /* Slashed zero */
  
  /* Variable font weight control */
  font-weight: 400;

}

/* =========================
   Monospace Font Application
   ========================= */
code,
kbd,
samp,
pre {
  font-family: var(--font-family-mono);
}

/* =========================
   Font Weight Utilities
   Using variable font's range (100-900)
   ========================= */
.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; }
.font-black { font-weight: 900; }

/* =========================
   Scoped Application (if needed)
   ========================= */
.bt4-landing,
.site-header,
.site-footer {
  font-family: var(--font-family-base);
}

/* =========================
   Prevent FOUT (Flash of Unstyled Text)
   Hide text until font is loaded
   ========================= */
@supports (font-variation-settings: normal) {
  html:not(.fonts-loaded) body {
    visibility: hidden;
  }
  
  html.fonts-loaded body {
    visibility: visible;
  }
}

/* =========================
   Critical Font Loading Script Trigger
   Add this to your JavaScript or header.php:
   
   document.documentElement.classList.add('fonts-loaded');
   
   OR use this in header.php before </head>:
   
   <script>
   (function() {
     if (document.fonts && document.fonts.ready) {
       document.fonts.ready.then(function() {
         document.documentElement.classList.add('fonts-loaded');
       });
     } else {
       document.documentElement.classList.add('fonts-loaded');
     }
   })();
   </script>
   ========================= */