@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* Palette */
    
    --blue-60: #377EDB;
    --blue-50: #4394FF;
    --blue-20: #A1BEE4;
    
    --gray-90: #28292C;
    --gray-20: #707D87;
    --gray-15: #B5C1D4;
    --gray-10: #F5F6F7;

    --red-50: #f1687a;
    --red-90: #E71B36;
    
    /* Sizes */
    --font-size-h1: 48px;
    --font-size-h2: 36px;
    --font-size-h3: 20px;
    --font-size-primary: 20px;
    --font-size-secondary: 20px;
    --font-size-small: 16px;
    --font-size-controls: 18px;

    --theme-color: var(--gray-90);
    --nav-icon-color: var(--blue-50);

    --nav-height: 130px;
    --footer-height: 130px;

    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: var(--font-size-primary);
    font-style: normal;
    
    color: var(--gray-90);
    background-color: var(--gray-10);

    scroll-behavior: smooth;
}

body.theme-light {
    --theme-color: var(--gray-10);
    --nav-icon-color: var(--theme-color);
}

body.theme-dark {
    --theme-color: var(--gray-90);
    --nav-icon-color: var(--theme-color);
}

body.no-scroll {
    overflow: hidden;
    position: fixed;
}