// SPACING (Based on an 8pt scale)
$base-spacing: 0.5rem; // 8px
$s-spacing: $base-spacing / 2; // 4px
$m-spacing: $base-spacing * 2; // 16px
$l-spacing: $base-spacing * 3; // 24px
$xl-spacing: $base-spacing * 4; // 32px
$xxl-spacing: $base-spacing * 5; // 40px

// SIZES
$base-border-width: 1px;
$base-border-radius: 3px;
$base-input-height: $xxl-spacing;
$base-checkbox-size: $m-spacing * 1.25;
$base-toggle-size: 1.187rem;
$filterNav-width-small: 14rem;
$filterNav-width-large: 20rem;

$header-height-sm: 3.5rem;
$header-height-lg: 4rem;
$sidebar-width-sm: $header-height-sm;
$sidebar-width-lg: $header-height-lg;
$sidebar-width-xl: 14rem;

// TYPOGRAPHY
$base-font-size: 16px;
$body-small-font-size: 0.75rem; // 12px
$body-font-size: 0.875rem; // 14px

$h5-font-size: 0.875rem; // 14px
$h4-font-size: 1rem; // 16px
$h3-font-size: 1.25rem; // 20px
$h2-font-size: 1.563rem; // 25px
$h1-font-size: 1.938rem; // 31px

$base-line-height: 1.5rem;
$line-height-small: 1.3rem;
$line-height-large: 1.875rem;
$line-height-reset: 1;

// COLORS
$brand-purple: #5A28C6;
$brand-purple-hover: darken($brand-purple, 10%);
$brand-purple-disabled: lighten($brand-purple, 30%);

$brand-dark-purple: #2D2838;

$brand-destructive: #D14545;
$brand-destructive-hover: darken($brand-destructive, 10%);
$brand-red: $brand-destructive;

$brand-blue: #4A93FF;
$brand-blue-hover: darken($brand-blue, 10%);

$brand-orange: #FBAA31;

$brand-green: #6FC78D;
$brand-green-hover: darken($brand-green, 10%);

$brand-black: #2D2838;
$brand-darkGrey: #615E67;
$brand-grey: #A09CA8; // Lightest text
$brand-lightGrey: #D9D8DE;
$brand-nearWhite: #F1F0F6;
$brand-white: #FFFFFF;
$brand-purpleWhite: #cebeff;

$base-input-background: #FAF9FD;

$base-border-color: $brand-lightGrey;

// BANNER
@mixin banner-gradient {
  background: linear-gradient(to right, #5b29c8 , #594aff);
}
$banner-min-height: 13rem;

// SIDEBAR
$sidebar-color: $brand-dark-purple;

// BOX SHADOWS
$base-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
$dark-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.125);
$m-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
$brand-chip-box-shadow: 0 2px 7px $brand-lightGrey;
$brand-card-box-shadow: 0 0 10px $brand-lightGrey;
$brand-bountyCard-box-shadow: 0 0 10px $brand-lightGrey;

// BORDERS
$base-border: $base-border-width solid $brand-lightGrey;
$light-border: $base-border-width solid $brand-nearWhite;

// Overlay
$overlay-color: darken($brand-dark-purple, 15%);
$overlay-background: rgba($overlay-color, 0.65);