@charset "UTF-8"; /* light theme color */ $light-background: #fff; $light-background-secondary: #eaeaea; $light-color: #222; $light-color-secondary: #767676; $light-border-color: #dcdcdc; /* dark theme colors */ $dark-background: #272a2b; $dark-background-secondary: #3b3d42; $dark-color: #ddd3c6; $dark-color-secondary: #73747b; $dark-border-color: #4a4b50; $media-size-phone: "(max-width: 684px)"; $media-size-phone-min: "(min-width: 684px)"; $media-size-tablet: "(max-width: 900px)"; $media-size-tablet-min: "(min-width: 900px)"; $media-size-medium: "(max-width: 1200px)"; $media-size-medium-min: "(min-width: 1200px)"; /* variables for js, must be the same as these in @custom-media queries */ :root { --phoneWidth: (max-width: 684px); --tabletWidth: (max-width: 900px); --mediumWidth: (max-width: 1200px); }