//$fancyFont: 'Roboto Slab', Roboto, Avenir, Helvetica, sans-serif;
$fancyFont: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
$matsimBlue: #4b7cc4;
$themeColor: $matsimBlue;
$themeColorPale: #3264afcc;

$paleBackground: #eceff2;
$darkBackground: #181518;

$navHeight: 3.25rem;
$bannerHighlight: #1d3355;
$sizeMobile: 30em;
$sizeVessel: 60rem;
$thumbnailHeight: 10rem;
/// $themeColor: #3498db;

$tuRed: #b40d1e;
$steelGray: #2a3c4f;
$themeColor: $matsimBlue;
$themeColorPale: #3264afcc;
$themeColorPaler: #b9c9df;
$colorBoldBackground: $steelGray;
$colorPurple: #7957d5;

:root {
  --bg: #dbd9d7;
  --bgBold: #ffffff;
  --bgCream: #edebe4;
  --bgCream2: #dddcd7;
  --bgCream3: #dddce7;
  --bgCream4: #e4e3f4;
  --bgHover: #ffd;
  --text: #4a4a4a;
  --textFancy: #17508b;
  --link: #e3428a;
  --linkHover: #0b263b;
  --shadowMode: 0px 0px 6px 6px rgba(0, 0, 0, 0.12);
  --borderThin: 1px solid #cce;
  --beige: #ffeead;
  --yellow: #ffcc5c;
}

.dark-mode {
  --bg: #2d3133;
  --bgBold: #181a1b;
  --bgCream: #2d3133;
  --bgCream2: #33373a;
  --bgCream3: #344857;
  --bgCream4: #304453;
  --bgHover: #4d4c37;
  --text: #c6c1b9;
  --textFancy: #a5c4e2;
  --link: #3bc0fc;
  --linkHover: #3bc0fc;
  --shadowMode: 0px 0px 5px 5px rgba(192, 192, 255, 0.12);
  --borderThin: 1px solid #15151d;
}
