@layer base {
    @font-face {
        font-family: 'Primary';
        src: url('/assets/fonts/Primary-Regular.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Primary';
        src: url('/assets/fonts/Primary-Medium.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Primary';
        src: url('/assets/fonts/Primary-SemiBold.woff2') format('woff2');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Primary';
        src: url('/assets/fonts/Primary-Bold.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }
    /* Roboto */
    @font-face {
        font-family: 'Secondary';
        src: url('/assets/fonts/Secondary-Regular.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Secondary';
        src: url('/assets/fonts/Secondary-Medium.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Secondary';
        src: url('/assets/fonts/Secondary-SemiBold.woff2') format('woff2');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Secondary';
        src: url('/assets/fonts/Secondary-Bold.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    :root {
        --font-primary: 'Primary', sans-serif;
        --font-secondary: 'Secondary', sans-serif;
    }

    /* Set default font for the entire document */
    html {
        font-family: var(--font-secondary);
    }

    /* Set primary font for headings */
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-primary);
    }

    /* Override classes for explicit font changes */
    .font-primary {
        font-family: var(--font-primary) !important;
    }
    .font-secondary {
        font-family: var(--font-secondary) !important;
    }
}