/* Self-hosted web fonts
   Place the corresponding .woff2 files under /public/fonts/ before enabling these.
   Recommended: only include the families/weights you actually use to reduce payload.

   After adding files, in app/root.tsx:
   - Remove Google Fonts <link rel="stylesheet" href="https://fonts.googleapis.com/...">
   - Add <link rel="preload" as="font" type="font/woff2" href="/fonts/<file>.woff2" crossorigin>
   - Add <link rel="stylesheet" href="/css/fonts.css" /> BEFORE your app CSS for earliest application
*/

/* Lexend Deca (100, 300) */
@font-face {
    font-family: 'Lexend Deca';
    src: url('/fonts/lexenddeca-100.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Lexend Deca';
    src: url('/fonts/lexenddeca-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: block;
}

/* Roboto Mono (400) */
@font-face {
    font-family: 'Roboto Mono';
    src: url('/fonts/robotomono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

/* Funnel Display (300, 600, 800) */
@font-face {
    font-family: 'Funnel Display';
    src: url('/fonts/funneldisplay-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Funnel Display';
    src: url('/fonts/funneldisplay-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Funnel Display';
    src: url('/fonts/funneldisplay-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Funnel Display';
    src: url('/fonts/funneldisplay-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Funnel Display';
    src: url('/fonts/funneldisplay-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Funnel Display';
    src: url('/fonts/funneldisplay-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: block;
}

/* DM Sans (400, 500, 700) */
@font-face {
    font-family: 'DM Sans';
    src: url('/fonts/dmsans-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'DM Sans';
    src: url('/fonts/dmsans-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'DM Sans';
    src: url('/fonts/dmsans-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}