:root, .theme-light
{
  // accent colors
  --color-primary: #222; // #86bcaf
  --color-primary-fg: #fff;
  --color-secondary: #1f3053;
  --color-negative: #d82853; 

  // foreground/text color
  --color-fg: #222;
  --color-fg-mid: #6f7375;
  --color-fg-light: #919294;
  --color-fg-xlight: #bec0c3;

  // background color shades
  --color-bg: #f7f7f7;
  --color-bg-dark: #d4d4d4;
  --color-bg-xmid: #f0f0f0;
  --color-bg-mid: #f4f4f4;
  --color-bg-light: #fff;
  --color-bg-xlight: #f8f8f8;
  --color-bg-xxlight: #fcfcfc;

  // line colors
  --color-line: #eaebec;
  --color-line-mid: #eaebec;
  --color-line-light: #f4f4f4;

  // misc colors
  --color-box: #fff;
  --color-shadow: rgba(0,0,0,0.03);
  --color-shadow-short: 0 1px 1px 0 rgba(0,0,0,0.05);
  --color-highlight: rgba(0,0,0,0.05);
  --color-overlay-shade: rgba(0,0,0,0.3);

  // message colors
  --color-accent-info: rgb(44, 162, 212);
  --color-accent-info-bg: rgba(44, 162, 212, 0.1);
  --color-accent-success: rgb(47, 187, 152);
  --color-accent-success-bg: rgba(47, 187, 152, 0.15);
  --color-accent-warn: rgb(211, 172, 35);
  --color-accent-warn-bg: rgba(233, 193, 56, 0.1);
  --color-accent-error: rgb(216, 40, 83);
  --color-accent-error-bg: rgba(216, 40, 83, 0.08);

  // sizes

  --padding: 32px;
  --padding-s: 24px;
  --height-top: 74px;
  --radius: 3px;

  --font-size-xs: 12px;
  --font-size-s: 13px;
  --font-size: 14px;
  --font-size-m: 15px;
  --font-size-l: 16px;
  --font-size-xl: 18px;
}

.theme-dark
{
  // accent colors
  --color-primary: #fff;
  --color-primary-fg: #222;
  --color-secondary: #292b2c;
  --color-negative: #d82853; 

  // foreground/text color
  --color-fg: #fff;
  --color-fg-mid: #c1c5c9;
  --color-fg-light: #919294;
  --color-fg-xlight: #919294;

  /*--color-fg: #222;
  --color-fg-mid: #6f7375;
  --color-fg-light: #919294;*/

  // background color shades
  --color-bg: #1c1e1f;
  --color-bg-dark: #fff;
  --color-bg-xmid: #292b2c;
  --color-bg-mid: #292b2c;
  --color-bg-light: #242526;
  --color-bg-xxlight: #242526;

  /*--color-bg: #fff;
  --color-bg-light: #f8f9fa;
  --color-bg-mid: #f4f5f6;*/

  // line colors
  --color-line: #2f3233;
  --color-line-mid: #3b3e40;
  --color-line-light: #2f3233;

  // misc colors
  --color-box: #242526;
  --color-shadow: rgba(0,0,0,0.3);
  --color-highlight: rgba(255,255,255, 0.03);
  --color-overlay-shade: rgba(0,0,0,0.3);
}


$accent-color-prefix: --color-accent;
$accent-colors: (
  "blue-gray": "#527281",
  "gray": "#8a9598",
  "brown": "#795548",
  "blue": "#429be2",
  "purple": "#9f3f9d",
  "teal": "#3bb1c0",
  "green": "#2fbb98",
  "lime": "#a0db61",
  "yellow": "#ffd100",
  "orange": "#f6b226",
  "red": "#d82853"
);

:root
{
  @each $name, $hex in $accent-colors
  {
    #{$accent-color-prefix}-#{$name}: unquote($hex);
  }
}

@each $name, $hex in $accent-colors
{
  $var: #{$accent-color-prefix}-#{$name};

  .color-#{$name}
  {
    color: var(#{$var});
  }

  .bg-color-#{$name}
  {
    background: var(#{$var});
  }
}

.color-default
{
  color: var(--color-fg);
}

.bg-color-default
{
  background: var(--color-fg);
}


// font sizes

$font-size: 14px;
$font-size-s: 12px;