@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --font-name: 'Proxima-Nova';
  --bg: #040405;

  /* Primary */
  --primary-grey-100: #0c0c0f;
  --primary-grey-80: #1a1a1f;
  --primary-grey-60: #2b2b33;
  --primary-grey-40: #5a5a68;
  --primary-grey-20: #7f7f8c;
  --primary-grey-40-semi: rgba(90, 90, 104, 0.6);
  
  /* Secondary */
  --primary-grey-10: rgba(34, 34, 41, 0.84);
  --primary-grey-4: rgba(43, 43, 51, 0.32);
  --primary-grey-8: rgba(12, 12, 15, 0.32);

  /* Accents */
  --accent-blue-100: rgba(45, 93, 224, 1);
  --accent-blue-120: rgba(69, 116, 245, 1);
  --accent-blue-80: rgba(22, 65, 184, 1);
  --accent-blue-40: rgba(45, 93, 224, 0.4);
  --accent-blue-20: rgba(45, 93, 224, 0.2);

  /* accent pink */
  --accent-pink-100: rgba(241, 60, 86, 1);
  --accent-pink-80: rgba(241, 60, 86, 0.8);
  --accent-pink-60: rgba(241, 60, 86, 0.6);
  --accent-pink-40: rgba(241, 60, 86, 0.4);
  --accent-pink-20: rgba(241, 60, 86, 0.2);

  /* Borders */
  --borders-white-100: linear-gradient(164.35deg, rgba(255, 255, 255, 0.08) 0.75%, rgba(255, 255, 255, 0.04) 97.46%);
  --borders-white-8: rgba(255, 255, 255, 0.08);
  --borders-white-4: rgba(255, 255, 255, 0.04);

  /* Content */
  --content-white-100: rgba(255, 255, 255, 1);
  --content-white-80: rgba(255, 255, 255, 0.8);
  --content-white-60: rgba(255, 255, 255, 0.6);
  --content-white-40: rgba(255, 255, 255, 0.4);
  --content-white-20: rgba(255, 255, 255, 0.2);
  --content-white-10: rgba(255, 255, 255, 0.1);

  /* Additional Colors */

  /* Orange */
  --additional-orange-100: rgba(224, 133, 82, 1);
  --additional-orange-80: rgba(224, 133, 82, 0.8);
  --additional-orange-60: rgba(224, 133, 82, 0.6);
  --additional-orange-40: rgba(224, 133, 82, 0.4);
  --additional-orange-20: rgba(224, 133, 82, 0.2);
  --additional-orange-10: rgba(224, 133, 82, 0.1);

  /* Green */
  --additional-green-100: rgba(50, 186, 120, 1);
  --additional-green-80: rgba(50, 186, 120, 0.8);
  --additional-green-60: rgba(50, 186, 120, 0.6);
  --additional-green-40: rgba(50, 186, 120, 0.4);
  --additional-green-20: rgba(50, 186, 120, 0.2);
  --additional-green-10: rgba(50, 186, 120, 0.1);

  /* Yellow */
  --additional-yellow-100: rgba(255, 193, 76, 1);
  --additional-yellow-80: rgba(255, 193, 76, 0.8);
  --additional-yellow-60: rgba(255, 193, 76, 0.6);
  --additional-yellow-40: rgba(255, 193, 76, 0.4);
  --additional-yellow-20: rgba(255, 193, 76, 0.2);
  --additional-yellow-10: rgba(255, 193, 76, 0.1);

  --additional-yellow-maintenance: #e7cb86;

  /* Red */
  --additional-red-100: rgba(241, 52, 75, 1);
  --additional-red-80: rgba(241, 52, 75, 0.8);
  --additional-red-60: rgba(241, 52, 75, 0.6);
  --additional-red-40: rgba(241, 52, 75, 0.4);
  --additional-red-20: rgba(241, 52, 75, 0.2);
  --additional-red-10: rgba(241, 52, 75, 0.1);

  /* Marine */
  --additional-marine-100: rgba(46, 186, 246, 1);
  --additional-marine-80: rgba(46, 186, 246, 0.8);
  --additional-marine-60: rgba(46, 186, 246, 0.6);
  --additional-marine-40: rgba(46, 186, 246, 0.4);
  --additional-marine-20: rgba(46, 186, 246, 0.2);
  --additional-marine-10: rgba(46, 186, 246, 0.1);

  /* purple */
  --additional-purple-100: rgba(99, 99, 224, 1);
  --additional-purple-80: rgba(99, 99, 224, 0.8);
  --additional-purple-60: rgba(99, 99, 224, 0.6);
  --additional-purple-40: rgba(99, 99, 224, 0.4);
  --additional-purple-20: rgba(99, 99, 224, 0.2);
  --additional-purple-10: rgba(99, 99, 224, 0.1);

  --additional-maraine-100: rgba(45, 203, 224, 1);
  --secondary-grey-10: rgba(34, 34, 41, 0.84);
  --secondary-grey-8: rgba(12, 12, 15, 0.32);
  --secondary-grey-4: rgba(43, 43, 51, 0.32);

  --accent-gradient: linear-gradient(92.9deg, #3d70ff 23.52%, #cf38d2 52.31%, #ee225e 81.62%);

  --scrollbar-color-0: #474a54;
  --scrollbar-thumb-color-0: #1a1a1f;
  --app-background: url('/img/app_background.png');


  --nav-bar-background-color: #14141A;


  /*  Neutrals  */
  --Neutrals-Black-700: #25262C;
  --Neutrals-Black-800: #1D1D23;
}