// theme-agnostic colors
:root
{
  --color-accent: #76b900; // #f9aa19; // #76b900 // #67bdb1
  --color-accent-fg: #ffffff;

  --color-negative: rgb(216, 40, 83);
  --color-image-bg: rgb(255, 255, 255);
  
  // message colors
  --color-accent-info: rgb(44, 162, 212);
  --color-accent-info-dim: rgba(44, 162, 212, 0.3);
  --color-accent-info-bg: rgba(228, 242, 249, 0.6);
  --color-accent-success: rgb(47, 187, 152);
  --color-accent-success-bg: rgba(47, 187, 152, 0.1);
  --color-accent-warn: rgb(247, 125, 5);
  --color-accent-warn-bg: rgba(247, 125, 5, 0.1);
  --color-accent-error: rgb(216, 40, 83);
  --color-accent-error-bg: rgba(216, 40, 83, 0.08);
}


$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": "#fdd330",
  "orange": "#ff662b",
  "red": "rgb(216, 40, 83)"
);

: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}) !important; 
  }

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

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

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

.color-primary
{
  color: var(--color-primary);
}

.color-negative
{
  color: var(--color-negative);
}