/* Font Optimization CSS - Prevents FOUT/FOUC */

/* Optimized font stacks with size-adjusted fallbacks */
:root {
    /* Font fallback stacks with size adjustments to minimize layout shift */
    --font-roboto: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-nunito: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-lato: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-quattrocento: 'Quattrocento', Georgia, 'Times New Roman', serif;
}

/* Prevent invisible text during font swap period */
.font-loading {
    font-display: swap;
}

/* Size-adjusted fallback fonts to minimize layout shift */
@font-face {
    font-family: 'Roboto-fallback';
    src: local('Arial');
    font-display: swap;
    ascent-override: 92.7734375%;
    descent-override: 24.4140625%;
    line-gap-override: 0%;
    size-adjust: 107.40%;
}

@font-face {
    font-family: 'Nunito-fallback';
    src: local('Arial');
    font-display: swap;
    ascent-override: 92.7734375%;
    descent-override: 24.4140625%;
    line-gap-override: 0%;
    size-adjust: 105.20%;
}

/* Critical font loading optimization */
.critical-font-loading {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-display: swap;
}

/* Prevent layout shift during font loading */
body {
    font-family: var(--font-roboto);
    font-display: swap;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-roboto);
    font-display: swap;
}

/* Specific optimizations for common elements */
.ui {
    font-family: var(--font-roboto) !important;
}

/* Preload hint for critical fonts */
.font-preload-hint {
    font-family: 'Roboto', 'Nunito Sans', system-ui, sans-serif;
}

/* Reduce cumulative layout shift */
.text-stable {
    font-kerning: none;
    text-rendering: optimizeSpeed;
}

/* Font loading states */
.fonts-loading .font-dependent {
    visibility: hidden;
}

.fonts-loaded .font-dependent {
    visibility: visible;
}

/* Smooth transition when fonts load */
.font-transition {
    transition: font-family 0.1s ease-in-out;
}