// colors
$white: $color-white !default;
$black: $color-black !default;
$red: $color-red !default;
$orange: $color-orange !default;
$yellow: $color-yellow !default;
$green: $color-green !default;
$blue: $color-blue !default;
$teal: $color-teal !default;
$pink: $color-pink !default;
$purple: $color-purple !default;
$cyan: $color-cyan !default;

$primary: $color-blue !default;
$success: $color-green !default;
$info: $color-cyan !default;
$warning: $color-yellow !default;
$danger: $color-red !default;

$yiq-contrasted-threshold: 200 !default;

// Spacing
$sizes: (
  5: 5%,
  10: 10%,
  15: 15%,
  20: 20%,
  30: 30%,
  40: 40%,
  50: 50%,
  60: 60%,
  70: 70%,
  80: 80%,
  90: 90%,
);

// fonts
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-japanese: 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic' , 'メイリオ' , Meiryo , 'ＭＳ ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif !default;
$font-family-base: $font-family-sans-serif , $font-family-japanese !default;
$font-size-base: 0.875rem !default;
$font-weight-base: lighter !default;

// Grid columns
$grid-gutter-width: 20px !default;

// Spacing
$spacer: 0.625rem !default;

// Components
$border-radius: .125rem !default;
$border-radius-lg: .1875rem !default;
$border-radius-sm: .125rem !default;

// Buttons + Forms
$input-btn-padding-y: .3125rem !default;
$input-btn-padding-y-sm: .1875rem !default;
$input-btn-padding-y-lg: .4375rem !default;
$input-btn-focus-box-shadow: inset 0 1px 1px rgba($color-black, 0.075), 0 -1px 8px rgba($color-blue, 0.5) !default;
$custom-select-focus-box-shadow: $input-btn-focus-box-shadow !default;

// Navbar
$navbar-toggler-padding-y: .125rem !default;
$navbar-toggler-padding-x: .5625rem !default;

// Cards
$card-spacer-y: .5625rem !default;
$card-spacer-x: .9375rem !default;

// Navs
$nav-link-padding-y: .375rem !default;
$nav-link-padding-x: .875rem !default;

// Modals
$modal-inner-padding: .9375rem !default;
$modal-header-padding-y: .5625rem !default;
$modal-header-padding-x: .9375rem !default;

// Pagination
$pagination-padding-y: .4rem !default;
$pagination-padding-x: .75rem !default;
$pagination-padding-y-sm: .2rem !default;
$pagination-padding-x-sm: .5rem !default;
$pagination-padding-y-lg: .6rem !default;
$pagination-padding-x-lg: 1.5rem !default;
$pagination-focus-box-shadow: none !default;

// Dropdowns
$dropdown-link-hover-bg: lighten($color-blue-gray, 60%) !default;

// Tables
$table-border-color: lighten($color-blue-gray, 50%) !default;
$table-cell-padding: .4375rem !default;
$table-head-bg: lighten($color-blue-gray, 62%) !default;

// Breadcrumbs
$breadcrumb-bg: $color-white !default;
$breadcrumb-divider: quote(">") !default;

// Options
$enable-shadows: true;

// Body
$body-color: $color-black-lighter;

// Components
$border-radius: 2px;
$border-radius-xl: 4px;
$border-radius-lg: 3px;
$border-radius-sm: 2px;
$border-radius-xs: 2px;

// Typography
$font-size-root-value: 16;

$font-size-base: 14 / $font-size-root-value * 1rem;
$font-size-xl: 20 / $font-size-root-value * 1rem;
$font-size-lg: 16 / $font-size-root-value * 1rem;
$font-size-sm: 12 / $font-size-root-value * 1rem;
$font-size-xs: 10 / $font-size-root-value * 1rem;

// Buttons
$btn-padding-y: 0rem;
$btn-padding-x: 10 / $font-size-root-value * 1.2rem;
$btn-line-height: 32 / $font-size-root-value * 1rem;

$btn-padding-y-xl: 0rem;
$btn-padding-x-xl: 13 / $font-size-root-value * 1.2rem;
$btn-line-height-xl: 44 / $font-size-root-value * 1rem;

$btn-padding-y-lg: 0rem;
$btn-padding-x-lg: 12 / $font-size-root-value * 1.2rem;
$btn-line-height-lg: 38 / $font-size-root-value * 1rem;

$btn-padding-y-sm: 0rem;
$btn-padding-x-sm: 8 / $font-size-root-value * 1.2rem;
$btn-line-height-sm: 26 / $font-size-root-value * 1rem;

$btn-padding-y-xs: 0rem;
$btn-padding-x-xs: 6 / $font-size-root-value * 1.2rem;
$btn-line-height-xs: 20 / $font-size-root-value * 1rem;

$btn-border-radius: $border-radius;
$btn-border-radius-xl: $border-radius-xl;
$btn-border-radius-lg: $border-radius-lg;
$btn-border-radius-sm: $border-radius-sm;
$btn-border-radius-xs: $border-radius-xs;

$btn-transition: none;

$btn-fw-icon-width: 18 / 14 * $font-size-base;
$btn-fw-icon-width-xl: 18 / 14 * $font-size-xl;
$btn-fw-icon-width-lg: 18 / 14 * $font-size-lg;
$btn-fw-icon-width-sm: 18 / 14 * $font-size-sm;
$btn-fw-icon-width-xs: 18 / 14 * $font-size-xs;

$btn-fw-margin: ($btn-padding-x * 2 + $btn-fw-icon-width - $btn-line-height) / 2;
$btn-fw-margin-xl: ($btn-padding-x-xl * 2 + $btn-fw-icon-width-xl - $btn-line-height-xl) / 2;
$btn-fw-margin-lg: ($btn-padding-x-lg * 2 + $btn-fw-icon-width-lg - $btn-line-height-lg) / 2;
$btn-fw-margin-sm: ($btn-padding-x-sm * 2 + $btn-fw-icon-width-sm - $btn-line-height-sm) / 2;
$btn-fw-margin-xs: ($btn-padding-x-xs * 2 + $btn-fw-icon-width-xs - $btn-line-height-xs) / 2;