/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Quicksand:wght@400;500;600;700&family=Bitter:wght@500&family=Zilla+Slab:wght@500&display=swap');

:root {
    /* Font family variables */
    --font-opensans: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-quicksand: 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-zilla: 'Zilla Slab', Georgia, serif;
    --font-bitter: 'Bitter', Georgia, serif;
    
    /* Font weight variables - makes it more semantic */
    --font-regular: 400;
    --font-semibold: 600;
}

/* Usage examples */
.regular-text {
    font-family: var(--font-opensans);
    font-weight: var(--font-regular);  /* This is 400 */
}

.semibold-text {
    font-family: var(--font-opensans);
    font-weight: var(--font-semibold);  /* This is 600 */
}

/* If you still want the fallback local fonts */
@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Regular'),
         url('../fonts/OpenSans-Regular.woff2') format('woff2'),
         url('../fonts/OpenSans-Regular.woff') format('woff'),
         url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans semi';
    src: local('Open Sans SemiBold'),
         url('../fonts/OpenSans-SemiBold.woff2') format('woff2'),
         url('../fonts/OpenSans-SemiBold.woff') format('woff'),
         url('../fonts/OpenSans-SemiBold.ttf') format('truetype');
    font-display: swap;
}