@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');

$defFont: 'Quicksand', sans-serif;

/* light colorscheme, use this as template */
// $disabledColor: gray;
// $warningColor: red;
// $shadowColor: #232627;
// 
// $background0: #282C3466; /* background for floating div */
// $background1: #F7F2DF;
// $background2: #A480CF;
// $background3: #ECF5D9; /* foreground for floating div */
// $background4: $background1; /* for form pane bg */
// 
// $foreground1: #000000;
// $foreground2: #F83A59;
// 
// $link1: $foreground1;
// $link2: $foreground2;
// 
// $defFG: $foreground1;
// $altFG: $foreground2;
// 
// $border1: #232627;
// $border2: lightgreen;
// 
// $underline0: $disabledColor;
// $underline1: #F83A59;
// $underline2: #FF79C6;
// $underline3: $warningColor;
// 
// $defBigShadow: 0px 2px 4px $shadowColor;
// $floatingShadow: 6px 6px 6px $shadowColor;
/* template ends here */

/* main dark theme inspired by dracula */
/* my personal favourite */
/* I name it dorakura (ドラクラー) */

$fontSize1: 1rem;
$fontSize2: 1.5rem;
$fontSize3: 2rem;
$fontSize4: 2.5rem;

$disabledColor: gray;
$warningColor: red;
$shadowColor: #232627;

$background0: #282C3466; /* background for floating div */
$background1: #282A36;
$background2: #383A59;
$background3: #2E323B; /* foreground for floating div */
$background4: #00000000; /* for form pane bg */

$foreground1: #FFFFFF;
$foreground2: #FF79C6;

$link1: $foreground1;
$link2: $foreground2;

$defFG: $foreground1;
$altFG: $foreground2;

$border0: gray;
$border1: pink;
$border2: lightgreen;

$underline0: $disabledColor;
$underline1: lightblue;
$underline2: #FF79C6;
$underline3: $warningColor;

$defBigShadow: 0px 2px 4px $shadowColor;
$floatingShadow: 6px 6px 6px $shadowColor;

$defTransition: 0.3s;