/* Font Fallbacks for Twinkle Tide
 * This file provides fallback fonts if Google Fonts fail to load
 * It ensures the site remains visually consistent even without external fonts
 */

/* Fallback font stack for Roboto */
.font-roboto, 
body, 
p, 
div, 
span, 
input, 
textarea, 
select, 
button {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* Fallback font stack for Playfair Display */
.font-playfair,
h1, h2, h3, h4, h5, h6,
.title,
.heading {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* Fallback font stack for Inter */
.font-inter,
.nav,
.menu,
.footer {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* Font loading optimization */
.fonts-loaded {
    /* This class can be added via JavaScript when fonts are loaded */
    font-display: swap;
}

/* Fallback for when fonts are still loading */
.fonts-loading {
    font-display: fallback;
}

/* Ensure text remains readable during font loading */
body {
    font-display: swap;
}

/* Specific font weights with fallbacks */
.font-light {
    font-weight: 300;
}

.font-regular {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

/* Font loading detection */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto'), local('Roboto-Regular');
}
/*
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Playfair Display'), local('PlayfairDisplay-Regular');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Inter'), local('Inter-Regular');
}
*/