@font-face {
    font-family: 'ClashGrotesk';
    src: url('class-grostesk.ttf') format('truetype');
    font-weight: 200 800;
    font-display: swap;
}

@font-face {
    font-family: 'space-grostesk';
    src: url('class-grostesk.ttf') format('truetype');
    font-weight: 200 800;
    font-display: swap;
}

:root {
    --bg-canvas: #F5F2EB;
    --text-primary: #121212;
}

body {
    /* font-family: 'ClashGrotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; */
    background-color: var(--bg-canvas);
    color: var(--text-primary);
}

.font-clash {
    font-family: 'ClashGrotesk', sans-serif;
}

/* Nav mobile menu toggle via checkbox */
#nav-toggle:checked ~ #mobile-menu {
    display: flex !important;
}

#nav-toggle:checked ~ label .icon-open {
    display: none !important;
}

#nav-toggle:checked ~ label .icon-close {
    display: block !important;
}

/* Custom form elements styling to match canvas background */
select option {
    background-color: var(--bg-canvas);
    color: var(--text-primary);
}