/*:root, .theme-light
{
  // accent colors
  --color-primary: #04bfbf; //linear-gradient(75deg, #48da9c, #3eb8ad); //#484c5b; // #292b2c; // #00aea2
  --color-primary-fg: #fff;
  --color-primary-low: rgba(4, 191, 191, 0.15);
  --color-primary: #04bfbf;
  --color-primary-fg: #fff;
  --color-primary-two: #3d72c4;
  --color-negative: #d82853; 

  // foreground/text color
  --color-fg: #222;
  --color-fg-mid: #656f74;
  --color-fg-light: #838995;
  --color-fg-xlight: #b2b8c2;

  // background color shades
  --color-bg: #f7f8f9;
  --color-bg-dark: #d4d5d6;
  --color-bg-xmid: #f0f1f2;
  --color-bg-mid: #f4f5f6;
  --color-bg-light: #fff;
  --color-bg-xlight: #f8f9fa;
  --color-bg-xxlight: #fcfdfe;

  // line colors
  --color-line: #eaebec;
  --color-line-mid: #eff0f1;
  --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.15);

  // 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: 6px;

  --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
{
  // 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: #1c1e1f;
  --color-bg-xmid: #292b2c;
  --color-bg-mid: #282c3b;
  --color-bg-light: #242526;
  --color-bg-xlight: #292b2c;
  --color-bg-xxlight: #242526;*/

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

  /*// line colors
  --color-line: #2f3233;
  --color-line-mid: #2f3233;
  --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);
}*/

:root
{
  // accent colors
  --color-primary: #ff662b; //linear-gradient(75deg, #48da9c, #3eb8ad); //#484c5b; // #292b2c; // #00aea2
  --color-primary-fg: #fff;
  --color-primary-low: rgba(229, 225, 221, 0.3);
  --color-primary-two: #e5e4df;
  --color-primary-line: #e0dfda;
  --color-secondary: #f9e0c4;
  --color-secondary-fg: #20242a;
  --color-negative: #d82853;

  // foreground colors
  --color-fg: #fff;
  --color-fg-dim: #b0b4b8;
  --color-fg-dim-two: #898b8c;

  
  // background colors
  $color-shade-base: #262c34;
  --color-bg: #191e25;
  --color-bg-bright: #{darken($color-shade-base, 2%)};
  --color-bg-bright-two: #{desaturate(lighten($color-shade-base, 2%), 3%)};
  --color-bg-bright-three: #{desaturate(lighten($color-shade-base, 6%), 5%)};
  --color-bg-dim: #{darken($color-shade-base, 4%)};
  /*$color-shade-base: #141617;
  --color-bg: #141617;
  --color-bg-bright: #{lighten($color-shade-base, 5%)};
  --color-bg-bright-two: #{lighten($color-shade-base, 10%)};
  --color-bg-bright-three: #{lighten($color-shade-base, 14%)};
  --color-bg-dim: #{lighten($color-shade-base, 2%)};*/

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

  // lines
  --color-line: #2a2d2e;
}



// theme-agnostic colors
:root
{
  // image background
  --color-bg-image: #e7ecee;

  // 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: 6px;

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


.theme-primary
{
  // accent colors
  --color-primary: #fff; //linear-gradient(75deg, #48da9c, #3eb8ad); //#484c5b; // #292b2c; // #00aea2
  --color-primary-fg: #000;
  --color-primary-low: rgba(255, 255, 255, 0.15);

  // foreground/text color
  --color-fg: #fff;
  --color-fg-mid: rgba(255, 255, 255, 0.6);
  --color-fg-light: rgba(255, 255, 255, 0.4);
  --color-fg-xlight: rgba(255, 255, 255, 0.3);

  // background color shades
  --color-bg: #04bfbf;
  --color-bg-light: #04bfbf;
  /*--color-bg-dark: #d4d5d6;
  --color-bg-xmid: #f0f1f2;
  --color-bg-mid: #f4f5f6;
  --color-bg-light: #fff;
  --color-bg-xlight: #f8f9fa;
  --color-bg-xxlight: #fcfdfe;*/

  // line colors
  /*--color-line: #eaebec;
  --color-line-mid: #eff0f1;
  --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.15);

  // 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;
}


$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": "#ff662b",
  "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;