:root
{
  // accent colors
  --color-primary: #292b2c;
  --color-primary-fg: #fff;
  --color-secondary: #292b2c;
  --color-negative: #d82853; 

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

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

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

  // 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.1);

  // 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.1);
  --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.1);

  // sizes

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

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

.theme-dark
{
  // accent colors
  --color-primary: #f7f8f9;
  --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: #222;
  --color-fg-mid: #6f7375;
  --color-fg-light: #919294;*/

  // background color shades
  --color-bg: #1c1e1f;
  --color-bg-mid: #292b2c;
  --color-bg-light: #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);
}


// font sizes

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