//#region Colors
// Theme colors
$bz-theme-100: #CFF2F2;
$bz-theme-200: #7EDBDD;
$bz-theme-300: #33BFC1;
$bz-theme-400: #217D7E;
$bz-theme-500: #1A6061;
$bz-theme-600: #114040;

// Neutral colors (Use for texts, fills, backgrounds, borders, etc)
$bz-neutral-100: #FFFFFF;
$bz-neutral-200: #FAFAFA;
$bz-neutral-300: #E0E0E0;
$bz-neutral-400: #9E9E9E;
$bz-neutral-500: #757575;
$bz-neutral-600: #272727;

// State colors
$bz-color-state-success: #2D8631;
$bz-color-state-warning: #F9A825;
$bz-color-state-error: #DA3B3B;
$bz-color-state-info: #1377D9;
//#endregion

//#region Border Radius
$bz-border-radius-s: 2px;
$bz-border-radius-m: 4px;
$bz-border-radius-l: 8px;
$bz-border-radius-xl: 12px;
//#endregion

//#region Fonts
// Variables
$bz-font-family: "Open Sans", Arial, Helvetica, sans-serif;

// Size
$bz-font-size-base: 62.5%;
$bz-font-size-caption: 1rem;
$bz-font-size-body-small: 1.2rem;
$bz-font-size-body: 1.4rem;
$bz-font-size-subheading: 1.6rem;
$bz-font-size-title: 2.4rem;
$bz-font-size-heading: 2.7rem;
$bz-font-size-display: 3.6rem;

// Weight
$bz-font-weight-regular: 400;
$bz-font-weight-semibold: 600;
//#endregion

//#region Shadows
$bz-shadow-xs: 0 0 4px rgba(0, 0, 0, .06), 0 2px 2px rgba(0, 0, 0, .12);
$bz-shadow-s: 0 2px 2px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .24);
$bz-shadow-m: 0 2px 8px rgba(0, 0, 0, .14), 0 4px 4px rgba(0, 0, 0, .12), 0 8px 8px rgba(0, 0, 0, .06);
$bz-shadow-l: 0 4px 16px 2px rgba(0, 0, 0, .08), 0 6px 32px 6px rgba(0, 0, 0, .08), 0 8px 8px rgba(0, 0, 0, .16);
//#endregion

//#region Space
// Use padding. Components like: Cards
$bz-space-inset-default: 1.6rem;
$bz-space-inset-xs: .4rem;
$bz-space-inset-s: .8rem;
$bz-space-inset-m: 1.6rem;
$bz-space-inset-l: 2.4rem;
$bz-space-inset-xl: 3.2rem;

// Use padding. Components like: Buttons
$bz-space-inset-squish-default: .8rem 1.6rem;
$bz-space-inset-squish-xs: .4rem .8rem;
$bz-space-inset-squish-s: .8rem 1.6rem;
$bz-space-inset-squish-m: 1.6rem 2.4rem;
$bz-space-inset-squish-l: 1.6rem 3.2rem;

// Use margin-bottom. Vertical space
$bz-space-stack-default: 1.6rem;
$bz-space-stack-xs: .4rem;
$bz-space-stack-s: .8rem;
$bz-space-stack-m: 1.6rem;
$bz-space-stack-l: 2.4rem;
$bz-space-stack-xl: 3.2rem;

// Use margin-right. Horizontal space
$bz-space-inline-default: 1.6rem;
$bz-space-inline-xs: .4rem;
$bz-space-inline-s: .8rem;
$bz-space-inline-m: 1.6rem;
$bz-space-inline-l: 2.4rem;
$bz-space-inline-xl: 3.2rem;
//#endregion

//#region Grids
$neat-grid: (columns: 12, gutter: 1.6rem,);
$reset-gutter: (gutter: 0);
$custom-neat-grid: (columns: 12, gutter: 0, media: 1000px,);
//#endregion

//#region Headers
$bz-header-height: 64px;
//#endregion
