/* stylelint-disable */
:root {
  /* -- Colors */
  --defaultPrimaryColor: rgba(0, 0, 0, 0.4);
  --darkPrimaryColor: rgba(0, 0, 0, 0.6);
  --almostBlack: rgba(0, 0, 0, 0.9);

  --colorSuccess: #43b581;
  --colorDanger:  #ff4400;
  --colorBlue:    #5d7ce6;
  --colorMuted:   #727272;
  --colorYelor:   #f8882d; /* Yelor = YellowOrange */
  --colorGolden:  #daa520;

  --colorBlueMuted: rgba(102, 187, 255, 0.3);
  --colorYelorMuted: rgba(255, 171, 64, 0.3);

  --colorMutedLight:   color(var(--colorMuted) lightness(70%));

  --primaryLinkColor: var(--colorBlue);

  --textColorPrimary:     #F5F5F5;
  --primaryTextColor:     #F5F5F5;
  --textColorSecondary:   #212020;
  --secondaryTextColor:   #212020;

  --primarySurfaceColor: rgb(46, 47, 64);
  --secondarySurfaceColor: rgb(39, 39, 58);

  --tableHeaderSurfaceColor: rgba(0, 0, 0, .3);
  --tableRowOddSurfaceColor: rgba(255, 255, 255, .019);
  --tableRowEvenSurfaceColor: rgba(0, 0, 0, .019);

  --sliderTicksColor: #757575;
  --sliderTicksColorActive: #337AB7;
  /* Colors -- */

  /* -- Font */
  --fontFamily:
      -apple-system, BlinkMacSystemFont,
      "Segoe UI",
      Roboto, "Droid Sans",
      Ubuntu, Cantarell,
      "Fira Sans",
      Helvetica, Arial, sans-serif;

  --fontWeightLight:  300;
  --fontWeightNormal: 400;
  --fontWeightMedium: 500;

  --fontSizeCommon: 16px;
  --fontSizeMedium: 14px;
  --fontSizeSmall:  12px;
  --fontSizeTiny:   10px;
  /* Font -- */

  --dividerColor: color(var(--textColorSecondary) lightness(20%));
  --dividerLightColor: color(var(--textColorPrimary) lightness(-20%));

  --navDrawerWidth: 256px;

  --normalTransition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  --linearTransition: all 300ms linear;

  --themeColorPrimary: #1e2124;
  --themeColorLight: color(var(--themeColorPrimary) lightness(40%));
  --themeColorMedium: color(var(--themeColorPrimary lightness(20%)));

}

@custom-media --tiny (width < 400px);
@custom-media --small (width < 660px);
@custom-media --medium (width < 900px);

:export {
  /* -- Colors */
  black4: var(--defaultPrimaryColor);
  black6: var(--darkPrimaryColor);
  black9: var(--almostBlack);

  red:      var(--colorDanger);
  green:    var(--colorSuccess);
  blue:     var(--colorBlue);
  golden:   var(--colorGolden);

  gray:      var(--colorMuted);
  grey:      var(--colorMuted);
  lightGray: var(--colorMutedLight);

  yelor:           var(--colorYelor);
  yellowOrange:    var(--colorYelor);

  blueMuted:  var(--colorBlueMuted);
  yelorMuted: var(--colorYelorMuted);

  textColorPrimary:    var(--textColorPrimary);
  primaryTextColor:    var(--textColorPrimary);
  textColorSecondary:  var(--textColorSecondary);
  secondaryTextColor:  var(--textColorSecondary);
  dividerColor: var(--dividerColor);
  /* Colors -- */

  /* -- Font */
  fontFamily: var(--fontFamily);

  fontWeightLight: var(--fontWeightLight);
  fontWeightNormal: var(--fontWeightNormal);
  fontWeightMedium: var(--fontWeightMedium);

  fontSizeCommon: var(--fontSizeCommon);
  fontSizeMedium: var(--fontSizeMedium);
  fontSizeSmall: var(--fontSizeSmall);
  /* Font -- */

  /*- Surfaces --*/
  primarySurfaceColor: var(--primarySurfaceColor);
  secondarySurfaceColor: var(--secondarySurfaceColor);
}

.textSuccess  { color: var(--colorSuccess) }
.textDanger   { color: var(--colorDanger) }
.textMuted    { color: var(--colorMuted) }

/* TODO - needs to be refactored since this file shouldn't just be a place to stuff classes */


/* stylelint-enable */

