/* 
=================================
XUÂN PHẠM MAKEUP - FONT PERFORMANCE OPTIMIZATION
Tối ưu hóa performance của fonts cho website
=================================
*/

/* ===================================== */
/* CSS VARIABLES - FONT DEFINITIONS      */
/* ===================================== */
:root {
    /* Font Families với fallbacks tối ưu */
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Arial', sans-serif;
    --font-heading: 'Playfair Display', 'Libre Baskerville', 'Times New Roman', Georgia, serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Arial', sans-serif;
    --font-accent: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    
    /* Font weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
}

/* ===================================== */
/* FONT FACE DECLARATIONS - OPTIMIZED    */
/* ===================================== */

/* Montserrat - Font chính cho body text */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap; /* Tránh FOIT - hiển thị fallback ngay lập tức */
    src: url('https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew7PQ.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Playfair Display - Font cho headings */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap; /* Tránh FOIT */
    src: url('https://fonts.gstatic.com/s/playfairdisplay/v29/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiunDTbtXK-F2qO0isEw.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Libre Baskerville - Fallback cho headings */
@font-face {
    font-family: 'Libre Baskerville';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap; /* Tránh FOIT */
    src: url('https://fonts.gstatic.com/s/librebaskerville/v14/kmKnZrc3Hgbbcjq75U4uslyuy4kn0qNcWx8WYA.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cormorant Garamond - Font accent */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 700;
    font-display: swap; /* Tránh FOIT */
    src: url('https://fonts.gstatic.com/s/cormorantgaramond/v16/co3YmX5slCNuHLi8bLeY9MK7whWMhyjQAllvuiWF.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===================================== */
/* GLOBAL FONT APPLICATIONS              */
/* ===================================== */

/* Body - Font chính */
body {
    font-family: var(--font-body);
    font-weight: var(--font-weight-normal);
    font-display: swap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Headings - Font cho tiêu đề */
h1, h2, h3, h4, h5, h6,
.hero-title,
.hero-title-main,
.hero-title-accent,
.section-title {
    font-family: var(--font-heading);
    font-display: swap;
    font-feature-settings: "liga" 1, "kern" 1;
    text-rendering: optimizeLegibility;
}

/* Buttons và CTAs */
.btn,
.cta-button,
.nav-link {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-display: swap;
}

/* Navigation */
.nav-menu,
.navbar {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-medium);
    font-display: swap;
}

/* ===================================== */
/* VIETNAMESE CHARACTER SUPPORT          */
/* ===================================== */

/* Đảm bảo font Vietnamese characters render đúng */
*[lang="vi"],
html[lang="vi"] * {
    font-feature-settings: "liga" 1, "kern" 1;
    text-rendering: optimizeLegibility;
}

/* Specific Vietnamese character handling */
.vietnamese-text {
    font-family: var(--font-body);
    font-display: swap;
    /* Ensure proper spacing for Vietnamese diacritics */
    line-height: 1.6;
}

/* ===================================== */
/* FALLBACK STRATEGIES                   */
/* ===================================== */

/* Fallback khi Google Fonts không load được */
@supports not (font-family: 'Montserrat') {
    body,
    .btn,
    .nav-link {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Arial', sans-serif !important;
    }
}

@supports not (font-family: 'Playfair Display') {
    h1, h2, h3, h4, h5, h6,
    .hero-title,
    .section-title {
        font-family: 'Libre Baskerville', 'Times New Roman', Georgia, serif !important;
    }
}

@supports not (font-family: 'Libre Baskerville') {
    h1, h2, h3, h4, h5, h6,
    .hero-title,
    .section-title {
        font-family: 'Times New Roman', Georgia, serif !important;
    }
}

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

/* Font loading optimization */
.font-loading {
    font-display: swap;
    font-variation-settings: normal;
}

/* Critical text - hiển thị ngay với system fonts */
.critical-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    transition: font-family 0.1s ease;
}

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

/* ===================================== */
/* RESPONSIVE FONT ADJUSTMENTS           */
/* ===================================== */

/* Mobile optimizations */
@media (max-width: 768px) {
    body {
        /* Smaller font sizes for mobile to improve readability */
        font-size: 16px;
        line-height: 1.5;
    }
    
    h1, .hero-title {
        /* Responsive font sizing */
        font-size: clamp(2rem, 8vw, 3.5rem);
        line-height: 1.2;
    }
    
    h2, .section-title {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
        line-height: 1.3;
    }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    h1, .hero-title {
        font-size: clamp(2.5rem, 6vw, 4rem);
    }
    
    h2, .section-title {
        font-size: clamp(2rem, 5vw, 3rem);
    }
}

/* Desktop optimizations */
@media (min-width: 1025px) {
    h1, .hero-title {
        font-size: clamp(3rem, 5vw, 5rem);
    }
    
    h2, .section-title {
        font-size: clamp(2.5rem, 4vw, 3.5rem);
    }
}

/* ===================================== */
/* ACCESSIBILITY IMPROVEMENTS            */
/* ===================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    body {
        font-weight: var(--font-weight-medium);
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-weight: var(--font-weight-bold);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .critical-text {
        transition: none;
    }
}

/* ===================================== */
/* PRINT OPTIMIZATIONS                   */
/* ===================================== */

@media print {
    body {
        font-family: 'Times New Roman', Georgia, serif;
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Times New Roman', Georgia, serif;
        font-weight: bold;
    }
}

/* ===================================== */
/* DEBUG & DEVELOPMENT                   */
/* ===================================== */

/* Debug helper - hiển thị font đang được sử dụng */
.debug-font::after {
    content: ' [Font: ' attr(data-font) ']';
    font-size: 0.7em;
    opacity: 0.5;
    font-family: monospace;
}

/* Performance metrics cho development */
.font-metrics {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    font-family: monospace;
    z-index: 9999;
    border-radius: 4px;
    display: none; /* Chỉ hiển thị khi debug */
}

.font-metrics.show {
    display: block;
}