/* You can add global styles to this file, and also import other style files */

//html, body { height: 100%; }
//body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; background-color: #fafafa;}
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400&display=swap");

@function hexToRGB($hex) {
  @return red($hex), green($hex), blue($hex);
}

@mixin color($name, $color) {
  --#{$name}-color: #{$color};
  --#{$name}-rgb: #{hexToRGB($color)};
  --#{$name}-hover: #{lighten($color, 10)};
  --#{$name}-dark: #{darken($color, 10)};
  --#{$name}-disabled: #{lighten($color, 50)};
  --#{$name}-box-shadow: #{rgba($color, 0.5)};
  --#{$name}-box-shadow-hover: #{rgba($color, 0.4)};
}

// Primary Colors
//
// The primary colors for branding.
//
// primary-color    - #1ba94c; --primary-color
// secondary-color  - #097bbf; --secondary-color
// success-color    - #22a97a; --success-color
// disabled-color   - #6EA989; --disabled-color
// error-color      - #a93c32; --error-color
// brand-color-dark - #007827; --brand-color-dark
// heading-color    - #3a424e; --heading-color
// link-color       - #5fa6ff; --link-color
// link-color-hover - #447dbd; --link-color-hover
//
// Styleguide Base.Colors
:root {
  // Scope: Base Colors
  @include color(brand, #1ba94c);
  @include color(primary, #1ba94c);
  @include color(secondary, #097bbf);
  @include color(error, #a93c32);
  @include color(success, #22a97a);
  --disabled-color: #6EA989;

  // Scope: App
  --app-background : linear-gradient(to bottom, #fff 0%, #f3f7f7 100%);

  // Scope: Typography
  --font-family-sans-serif: 'Open Sans', sans-serif;
  --heading-color: #3a424e;
  --link-color: #5fa6ff;
  --link-color-hover: #447dbd;
  --disabled-text-color : #b7c9cc;

  // Scope: Toolbar
  --toolbar-background-color : #39424e;
  --toolbar-box-shadow-color : rgba(115, 143, 147, 0.3);
  --toolbar-border-color : #28313d;

  // Scope: Card
  --card-shadow-color: rgba(99, 118, 129, 0.3);
  --card-hover-shadow-color: rgba(99, 118, 129, 0.5);
  --card-margin-gutter : 0px;
}

body {
  font-family: var(--font-family-sans-serif) !important;
}