/* #region Colors */
$white: #ffffff;
$black: #000000;

$black-200: #696a6b;
$black-300: #565c62;
$black-500: #53575b;
$black-900: #41454d;

$primary-100: #e2eeff;
$primary-200: #c9dfff;
$primary-300: #96c0ff;
$primary-400: #68a5ff;
$primary-500: #3083ff;
$primary-600: #2b76e6;
$primary-700: #005be2;
$primary-800: #0051c9;
$primary-900: #0046af;

$light-50: #f7f8f9;
$light-100: #f1f3f4;
$light-200: #edeff0;
$light-300: #e5e7e9;
$light-400: #dddfe1;
$light-500: #d2d5d8;
$light-600: #b7bbc0;
$light-700: #a9afb4;
$light-800: #8e959d;
$light-900: #7b838c;
$light-1000: #626970;

$secondary-100: #e1fbfc;
$secondary-200: #bff2f5;
$secondary-300: #91e2e7;
$secondary-500: #00ccd7;

$positive-100: #daf5ec;
$positive-200: #b4e9d2;
$positive-300: #78ddbc;
$positive-400: #5cd6ad;
$positive-500: #22c891;
$positive-600: #1eb281;
$positive-700: #1b9c71;

$neutral-100: #fff8e2;
$neutral-200: #ffe0a3;
$neutral-500: #ffb424;
$neutral-700: #fea222;
$neutral-900: #d8840d;

$negative-100: #ffefee;
$negative-200: #ffcbce;
$negative-300: #ff9b96;
$negative-400: #ff827c;
$negative-500: #ff6a63;
$negative-600: #ec5d56;
$negative-700: #da564f;

$dark-100: #cfd0e8;
$dark-200: #b6b9dd;
$dark-300: #313d91;
$dark-400: #212791;
$dark-500: #0d148c;
$dark-600: #021074;
$dark-700: #1d1c64;
$dark-800: #070a46;

$alpha-30: 4D;
$input-shadow-color: unquote($primary-500 + '' + $alpha-30);
$backdrop-color: rgba(0, 0, 0, 0.56);

/* #endregion Colors */

/* #region Spacing (used for margin, padding, flex gaps etc) */
$spacing-multiplier: 0.5rem;
$spacing-1: $spacing-multiplier;
$spacing-2: $spacing-multiplier * 2;
$spacing-3: $spacing-multiplier * 3;
$spacing-4: $spacing-multiplier * 4;
$spacing-5: $spacing-multiplier * 5;
$spacing-6: $spacing-multiplier * 6;
$spacing-7: $spacing-multiplier * 7;
$spacing-8: $spacing-multiplier * 8;
$spacing-9: $spacing-multiplier * 9;
$spacing-10: $spacing-multiplier * 10;
$spacing-11: $spacing-multiplier * 11;
$spacing-12: $spacing-multiplier * 12;
$spacing-13: $spacing-multiplier * 13;
$spacing-14: $spacing-multiplier * 14;
$spacing-32: $spacing-multiplier * 32;

/* #endregion Spacing */

/* #region Breakpoints */
$breakpoint-xxs-end: 767px;
$breakpoint-xs-start: 768px;
$breakpoint-xs-end: 1023px;
$breakpoint-sm-start: 1024px;
$breakpoint-sm-end: 1279px;
$breakpoint-md-start: 1280px;
$breakpoint-md-end: 1439px;
$breakpoint-lg-start: 1440px;
$breakpoint-lg-end: 1919px;
$breakpoint-xl: 1920px;
/* #endregion Breakpoints */

/* #region Media */
$mobile: 'only screen and (max-width:#{$breakpoint-xxs-end})';
$tablet: 'only screen and (min-width:#{$breakpoint-sm-start}) and (max-width:#{$breakpoint-sm-end})';
$smallLaptop: 'only screen and (min-width:#{$breakpoint-md-start}) and (max-width:#{$breakpoint-md-end})';
$largeLaptop: 'only screen and (min-width:#{$breakpoint-lg-start}) and (max-width:#{$breakpoint-lg-end})';
$desktop: 'only screen and (min-width:#{$breakpoint-xl})';
// inclusive - mobile and below: use mobile, huge and below: everything, no need for media query
$tabletAndBelow: 'only screen and (max-width:#{$breakpoint-sm-end})';
$tabletAndAbove: 'only screen and (min-width:#{$breakpoint-sm-start})';
$smallLaptopAndBelow: 'only screen and (max-width:#{$breakpoint-md-end})';
$largeLaptopAndBelow: 'only screen and (max-width:#{$breakpoint-lg-end})';
$desktopAndAbove: 'only screen and (min-width:#{$breakpoint-xl})';
$largeLaptopAndAbove: 'only screen and (min-width:#{$breakpoint-lg-start})';
// combinations
$laptop: 'only screen and (min-width:#{$breakpoint-md-start}) and (max-width:#{$breakpoint-lg-end})';
/* #endregion Media */

/* #region Grid */
$grid-template-columns: repeat(12, [col-start] 1fr);
$grid-gap: 1rem;
/* #endregion Grid */

/* #region Fonts */
$heading-font-family: 'NHaasGroteskDSPro-75Bd', sans-serif;
$heading-font-family-label: 'NHaasGroteskDSPro-65Md', sans-serif;
$heading-font-size-1: 3.75rem;
$heading-font-size-2: 2rem;
$heading-font-size-3: 1.375rem;
$heading-font-size-4: 1.125rem;
$heading-font-size-5: 0.9375rem;
$heading-font-size-6: 0.8125rem;
$heading-font-size-label: 0.6875rem;
$heading-font-weight: 700;
$heading-font-weight-label: 400;
$body-font-family: HelveticaNeue, sans-serif;
$body-font-family-strong: HelveticaNeue-Medium, sans-serif;
$body-font-size-xs: 0.75rem;
$body-font-size-sm: 0.8125rem;
$body-font-size-md: 0.875rem;
$body-font-size-lg: 1rem;
$body-font-weight: 400;
$body-font-weight-strong: 500;
$font-smoothing: antialiased;
$heading-line-height: 1.1rem;
$body-line-height: 1.5rem;
.label {
  color: $black-900;
}
/* #endregion Fonts */

$transition-time: 250ms;
$border: 1px solid $light-400;
$shape-border-radius: $spacing-1;

$popover-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.16),
  0px 0px 1px rgba(0, 0, 0, 0.4);
$modal-shadow: 0px 32px 32px -8px rgba(0, 0, 0, 0.08),
  0px 0px 32px -8px rgba(0, 0, 0, 0.12);

$focus-line: linear-gradient(
  0deg,
  $primary-500 0,
  $primary-500 2px,
  $light-100 0
);
$focus-line-white: linear-gradient(
  0deg,
  $primary-500 0,
  $primary-500 2px,
  $white 0
);
$error-focus-line: linear-gradient(
  0deg,
  $negative-500 0,
  $negative-500 2px,
  $light-100 0
);
$error-focus-line-white: linear-gradient(
  0deg,
  $negative-500 0,
  $negative-500 2px,
  $white 0
);

@mixin scrollbar {
  ::-webkit-scrollbar {
    width: 0.625rem;
    opacity: 0.7;
    background-color: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 0.625rem;
    background-color: $light-500 !important;
  }

  ::-webkit-scrollbar-track {
    border-radius: 0.625rem;
    background-color: transparent;
  }
}