siimee/frontend/assets/sass/variables.scss

// 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: #060607;

// 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;
    }
}