// Break Points
$width-xs: 380px;
$width-sm: 576px;
$width-md: 768px;
$width-lg: 1024px;
$width-xl: 1280px;
$width-xxl: 1440px;

$grid-breakpoints: (
  xs: $width-xs,
  sm: $width-sm,
  md: $width-md,
  lg: $width-lg,
  xl: $width-xl,
  xxl: $width-xxl,
);

// Grid Break Points
$grid-columns: 12;
$grid-gap: 32px;
$grid-gutter: 32px;
$grid-columns-mobile: 4;
$grid-gap-mobile: 16px;
$grid-gutter-mobile: 24px;

// Grid
$container-max-width: $width-xxl;

// Admin toolbar
$admin-toolbar-height: 32px;
$admin-toolbar-height-mobile: 46px;

// Font-family
$font-karla: 'Karla';
$font-ibm-plex: 'IBM Plex Sans';
$font-default: $font-karla, $font-ibm-plex, helvetica, arial, sans-serif;

// Font-weight
$font-weight-bold: 700;
$font-weight-regular: 400;

// Spacing
$spacing-default: 0.25rem; // 4px
$spacing-base: $spacing-default;
$spacing-xs: multiple(2); // 8px
$spacing-xsm: multiple(3); // 12px
$spacing-sm: multiple(4); // 16px
$spacing-smd: multiple(5); // 20px
$spacing-md: multiple(6); // 24px
$spacing-lg: multiple(8); // 32px
$spacing-xl: multiple(10); // 40px
$spacing-xxl: multiple(12); // 48px
$spacing-xxxl: multiple(14); // 56px
$spacing-big: multiple(20); // 80px

/* all spacing in array */
$spacing: (
  'base': $spacing-default,
  'xs': $spacing-xs,
  'sm': $spacing-sm,
  'md': $spacing-md,
  'lg': $spacing-lg,
  'xl': $spacing-xl,
  'xxl': $spacing-xxl,
  'big': $spacing-big,
);

// Theme Colors
$color-white: #fff;
$color-black: #1f1f1f;
$color-black80: #4b4b4b;
$color-black60: #787878;
$color-black40: #a5a5a5;
$color-black20: #d2d2d2;
$color-black10: #e9e9e9;
$color-black5: #f4f4f4;

$color-main: #004b69;
$color-accent: #93c55f;
$color-accent--hover: #78b637;

$color-teagreen: #c9e2af;
$color-columbia: #c0e1eb;
$color-feldspar: #ffd6ad;
$color-papaya: #f9efd1;

$theme-colors: (
  white: $color-white,
  black: $color-black,
  black80: $color-black80,
  black60: $color-black60,
  black40: $color-black40,
  black20: $color-black20,
  black10: $color-black10,
  black5: $color-black5,
  main: $color-main,
  accent: $color-accent,
  accent--hover: $color-accent--hover,
  teagreen: $color-teagreen,
  columbia: $color-columbia,
  feldspar: $color-feldspar,
  papaya: $color-papaya,
);

$theme-colors-boxs: (
  teagreen: $color-teagreen,
  columbia: $color-columbia,
  feldspar: $color-feldspar,
  papaya: $color-papaya,
  black10: $color-black10,
);

// Transitions
$transition-time: 250ms;
$transition-default: $transition-time ease-in-out;