:root {
    --font-rubik: 'Rubik', sans-serif;
    --font-pacifico: 'Pacifico', cursive;
    --font-fredoka: 'Fredoka', sans-serif;
    --color-primary: #00709F;
    --color-sand: #E6C084;
    --color-dark: #1D1D1B;
}

@font-face {
    font-family: 'CoastalBeach-SansSerif';
    src: url('../fonts/CoastalBeach-SansSerif.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CoastalBeach-Script';
    src: url('../fonts/CoastalBeach-Script.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
    font-family: var(--font-rubik);
}

* {
    scrollbar-width: none;
    box-sizing: border-box;
}

::-webkit-scrollbar, *::-webkit-scrollbar {
    width: 0px;   
    height: 0px; 
    display: none;
}

.bg-sand-gradient {
    background: linear-gradient(180deg, rgba(230,192,132,0) 0%, var(--color-sand) 10%);
}

.text-primary { color: var(--color-primary); }
.text-dark { color: var(--color-dark); }
.font-rubik { font-family: var(--font-rubik); }