//  NearSt Fonts to be used across the UI
@import url("https://fonts.googleapis.com/css?family=Poppins:400,600,700,800|Material+Icons");
@import url("https://fe.near.st/ui/fonts/nearst-body.css");
// @import "../../node_modules/normalize-scss/sass/normalize/_import-now.scss";

// @import "../../node_modules/normalize-scss/sass/normalize";

@import './normalize';

// Variables for reuse across all stylesheets
$dark-blue: #171f7f;
$blue: #50a1ff;
$blue-hover: #4c90ea;
$blue-pale: #cce0fa;
$blue-pale-hover: #bed8fa;
$green: #2aca79;
$green-hover: #28c06f;
$dark-green: #009f43;
$black: #000;
$black-blue: #0a091a;
$grey-dark: #666;
$grey-medium-dark: #929ba2;
$grey-medium: #bfc4c8;
$grey-medium-light: #e2e2e2;
$grey-light: #ededed;
$grey-white: #fbfcfd;
$white: #ffffff;
$pink: #d65c7f;
$hot-pink: #e11e1e;
$red: #f56565;
$orange: #f2ae54;


// in order to export as json
$colour-map: (pink: $pink,
  hot-pink: $hot-pink,
  red: $red,
  orange: $orange,
  green: $green,
  green-hover: $green-hover,
  dark-green:$dark-green,
  blue-pale: $blue-pale,
  blue-pale-hover: $blue-pale-hover,
  blue: $blue,
  blue-hover: $blue-hover,
  dark-blue: $dark-blue,
  black: $black,
  black-blue: $black-blue,
  grey-dark: $grey-dark,
  grey-medium-dark: $grey-medium-dark,
  grey-medium: $grey-medium,
  grey-medium-light: $grey-medium-light,
  grey-light: $grey-light,
  grey-white: $grey-white,
  white: $white
  );


// to access colours in other projects as variables
:root {
  --dark-blue: #{$dark-blue};
  --blue: #{$blue};
  --blue-hover: #{$blue-hover};
  --blue-pale: #{$blue-pale};
  --blue-pale-hover: #{$blue-pale-hover};
  --green: #{$green};
  --green-hover: #{$green-hover};
  --dark-green:#{$dark-green};
  --black: #{$black};
  --black-blue: #{$black-blue};
  --grey-dark: #{$grey-dark};
  --grey-medium-dark: #{$grey-medium-dark};
  --grey-medium: #{$grey-medium};
  --grey-medium-light: #{$grey-medium-light};
  --grey-light: #{$grey-light};
  --grey-white: #{$grey-white};
  --white: #{$white};
  --pink: #{$pink};
  --hot-pink: #{$hot-pink};
  --red: #{$red};
  --orange: #{$orange};
}


@each $name,
$colour in $colour-map {
  .text-#{$name} {
    color: $colour;
  }

  .bg-#{$name} {
    background-color: $colour;
  }
}

$heading-font: "Poppins";
$body-font: "nearst-body";

// Base CSS to be applied across all stylesheets
html,
body {
  font-family: $body-font, -apple-system, "Helvetica Neue", "Arial", sans-serif;
  font-size: 15px;
  line-height: 1.35;
}

h1,
h2,
h3,
h4,
.card-title,
.title-font {
  font-family: $heading-font, -apple-system, "Helvetica Neue", "Arial", sans-serif;
}

input {
  font-family: $body-font, $heading-font, -apple-system, "Helvetica Neue", "Arial", sans-serif;
}

b,
strong {
  font-weight: 600;
}

a {
  text-decoration: none;
  color: inherit;
}