@charset "UTF-8";

/* light theme color */
$light-background: #fff;
$light-background-secondary: #eaeaea;
$light-color: #222;
$light-color-secondary: #767676;
$light-border-color: #dcdcdc;
$light-navbar: #f9f9f9;

/* dark theme colors */
$dark-background: #1c1f1f;
$dark-background-secondary: #3b3d42;
$dark-color: #eee9e2;
$dark-color-secondary: #73747b;
$dark-border-color: #4a4b50;
$dark-navbar: #1b1c1c;
$dark-image-border: #ffffff3f;

$scrollbar-background: #212020;
$scrollbar-color: #dcdcdc;

$screen-reader-text-background: #f1f1f1;
$screen-reader-text-color: #21759b;

$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);
}