/*initiate sass variables (they will later be converted to CSS variables in apply-css-variables.scss)*/
:root {
  --fontColor: #333333;
  --primaryColor: #00bfff;
  --onPrimaryColor: #ffffff;
  --primaryContainer: lighten($primaryColor, 40%);
  --onPrimaryContainer: #333333;
  --secondaryColor: #67fcd4;
  --onSecondaryColor: #ffffff;
  --errorColor: #ff0000;
  --warningColor: #ffa500;
  --infoColor: #0000ff;
  --successColor: #008000;
  --backgroundColor: #ffffff;
  --grayColor: #cccccc;
  --fontFamily: 'Roboto', sans-serif;
  --fontSize: 1rem;
  --lineHeight: 1.5;
  --borderRadius: 0.25rem;
  --borderWidth: 1px;
  --borderColor: #cccccc;
  --borderStyle: solid;
  --boxShadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  --boxShadowHover: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  --boxShadowActive: 0 0 0 1px rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.1);
  --boxShadowFocus: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  --boxShadowError: 0 0 0 1px rgba(255, 0, 0, 0.1),
    0 1px 2px 0 rgba(255, 0, 0, 0.1);
  --boxShadowWarning: 0 0 0 1px rgba(255, 165, 0, 0.1),
    0 1px 2px 0 rgba(255, 165, 0, 0.1);
  --boxShadowInfo: 0 0 0 1px rgba(0, 0, 255, 0.1),
    0 1px 2px 0 rgba(0, 0, 255, 0.1);
  --boxShadowSuccess: 0 0 0 1px rgba(0, 128, 0, 0.1),
    0 1px 2px 0 rgba(0, 128, 0, 0.1);
  --boxShadowGray: 0 0 0 1px rgba(204, 204, 204, 0.1),
    0 1px 2px 0 rgba(204, 204, 204, 0.1);
  --boxShadowBackground: 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 1px 2px 0 rgba(255, 255, 255, 0.1);
  --boxShadowText: 0 0 0 1px rgba(51, 51, 51, 0.1),
    0 1px 2px 0 rgba(51, 51, 51, 0.1);
  --boxShadowPrimary: 0 0 0 1px rgba(0, 191, 255, 0.1),
    0 1px 2px 0 rgba(0, 191, 255, 0.1);
  --boxShadowSecondary: 0 0 0 1px rgba(103, 252, 212, 0.1),
    0 1px 2px 0 rgba(103, 252, 212, 0.1);

  /*error*/
  /*warning*/
  /*info*/
  /*success*/
  //
  /*text*/
  /*background*/
  /*gray*/
  //
}