@font-face {
  font-family: 'GolosUI';
  src: url('../fonts/GolosUI/regular.woff') format('woff'),
  url('../fonts/GolosUI/regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /*from figma*/
  --svap-figma-secondary-contrast: #181818;
  --svap-figma-secondary-contrast_rgb: 24, 24, 24;
  --svap-figma-ui-accent: #FFB648;
  --svap-figma-ui-accent_rgb: 255, 182, 72;
  --svap-figma-ui-accent_darker: #ffa215;
  --svap-figma-ui-accent_darker_20: #e18700;
  --svap-figma-ui-accent_lighter: #ffdfae;
  --svap-figma-ui-accent-hover: #ffca7b;
  --svap-figma-ui-accent-hover_rgb: 255, 202, 123;
  --svap-figma-ui-negative: #FF5555;
  --svap-figma-ui-negative_rgb: 255, 85, 85;
  --svap-figma-ui-negative_lighter: #ff8888;
  --svap-figma-ui-positive: #1BEFBC;
  --svap-figma-ui-basic: rgba( 255, 255, 255, .62 );
  --svap-figma-basic-contrast_XS: rgba(255, 255, 255, .10);
  --svap-figma-modal-bg: #292929;
  --svap-figma-modal-bg_lighter: #434343;
  --svap-figma-modal-bg_darker: #101010;
  --svap-figma-modal-bg_darker_rgb: 16, 16, 16;
  --svap-figma-modal-bg_rgb: 41, 41, 41;
  --svap-figma-primary-deep: rgba( 255, 255, 255, .85 );
  --svap-figma-primary-medium: #949494;
  
  --svap-color-theme: var( --svap-figma-ui-accent );
  --svap-color-theme_rgb: var( --svap-figma-ui-accent_rgb );
  --svap-color-theme-lowlight: var( --svap-figma-ui-accent_darker );
  --svap-color-theme-highlight: var( --svap-figma-ui-accent-hover );
  --svap-color-main-bg: #1e1e1e;
  --svap-color-popup-bg: #292929;
  --svap-color-popup-bg-alt: #101010;
  --svap-color-widget-block-bg: rgba(255, 255, 255, .10);

  --svap-color-font: #c0c4c8;
  --svap-color-font-highlight: #fff;
  --svap-color-font-lowlight: #969ca4;
  --svap-color-negative: #FF5555;
  --svap-color-positive: #1BEFBC;
  --svap-color-warning: #ecc010;


  --svap-color-overlay: rgba( 0, 0, 0, .8 );
  --svap-color-box-shadow: rgba( 0, 0, 0, .4 );

  --svap-color-button-sso-top: var( --svap-color-theme );
  --svap-color-button-sso-bottom: var( --svap-color-theme );
  --svap-color-button-sso-top-highlight: var( --svap-color-theme );
  --svap-color-button-sso-bottom-highlight: var( --svap-color-theme );

  --svap-color-button-bg: var( --svap-color-theme );
  --svap-color-button-font: #181818;
  --svap-color-button-shadow: rgba(255, 77, 0, .21);
  --svap-color-input-bg-active: #434343;
  --svap-color-input-dropdown-font-active: #181818;

  --svap-font-family: 'GolosUI', sans-serif;
  --svap-font-family-alt: 'GolosUI', sans-serif;
}