// Color Variables
$yellow: #F7F5A6;
$light-green: #C2F279;
$dark-green: #4D9127;
$red: #FF3660;
$light-blue: #05DBF2;
$dark-blue: #183770;
$dark-grey: #1F2024;
$grey: #4C5264;
$light-grey: #D5D5D5;
$black: #000;

// Define the base font size
$base-font-size: 14px;

// Define breakpoints
$mobile: 350px;
$tablet: 768px;
$desktop: 960px;

// Define font sizes for each breakpoint
$mobile-font-size: $base-font-size;
$tablet-font-size: $base-font-size * 1.2;
$desktop-font-size: $base-font-size * 1.4;

// Set default font size
html {
    font-size: $base-font-size;
}

// Media queries for font sizes
@media (min-width: $mobile) {
    html {
        font-size: $mobile-font-size;
    }
}

@media (min-width: $tablet) {
    html {
        font-size: $tablet-font-size;
    }
}

@media (min-width: $desktop) {
    html {
        font-size: $desktop-font-size;
    }
}