config.css

/* Fonts */
$main-font: Rubik, sans-serif;
$font-size: 1.25rem;
$nav-font-size: 1.7rem;
$menu-font-size: 1rem;

/* Color scheme based on https://rosepinetheme.com/palette/ */
/* Colors */
$light-base-color: #FAF4ED;
$light-surface-color: #FFFAF3;
$light-overlay-color: #F2E9E1;
$light-menu-color: $light-surface-color;
$light-screen-overlay-color: rgb(242, 233, 225, 0.5);
$light-text-color: #575279;
$light-primary-color: #286983;
$light-red-color: #B4637A;

$dark-base-color: #232136;
$dark-surface-color: #2A273F;
$dark-overlay-color: #393552;
$dark-menu-color: $dark-surface-color;
$dark-screen-overlay-color: rgb(57, 53, 82, 0.5);
$dark-text-color: #E0DEF4;
$dark-primary-color: #3E8FB0;
$dark-red-color: #EB6F92;

/* Other */
$border-radius: 0.25rem;
$animation-duration: 0.2s;
$menu-backdrop: none; /* you can use backdrop-filter here, eg blur(5px);, but if so you need to make $light-menu-color and $dark-menu-color slightly transparent */
$screen-overlay-backdrop: blur(5px);