// breakpoint variables
$small: 640px;
$medium: 768px;
$large: 1024px;
$xlarge: 1216px;
$xxlarge: 1408px;

// font
$font-primary: 'pingfang SC', 'helvetica neue', 'arial', 'microsoft yahei ui', 'microsoft yahei',
'sans-serif';
$font-poppins: 'Poppins', 'sans-serif';
$font-code: 'Consolas', 'Menlo';

$font-base: 10;
$font-size: 1.6rem;
$font-line-height: 1.75;

$font-weight-thin: 100;
$font-weight-xlight: 200;
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-weight-xbold: 800;
$font-weight-black: 900;

// Color
$white: #fff;
$white-300: rgba($white, 0.3);
$white-400: rgba($white, 0.4);
$white-500: rgba($white, 0.5);
$white-600: rgba($white, 0.6);
$white-800: rgba($white, 0.8);
$gray-light: #f7f8f9;
$black: #2c2c2c;
$black-100: rgba($black, 0.1);
$black-150: rgba($black, 0.15);
$black-300: rgba($black, 0.3);
$black-400: rgba($black, 0.4);
$black-600: rgba($black, 0.6);
$black-800: rgba($black, 0.8);
$sky: #00aeef;
$blue: #3d3fea;
$blue-light: #6465ee;
$blue-medium: #3337A9;
$blue-dark: #172d72;
$blue-xdark: #101e4f;
$dark: #242b48;
$dark-800: rgba($dark, 0.8);
$dark-light: #54547a;
$green: #69c384;
$green-dark: #3b9960;
$gray: #e9eaee;
$pink: #ee6d85;
$purple: #7d3f98;
$yellow: #f8c200;
$red: #e30c34;
$orange: #ed772d;

// border
$border-radius: 6px;
$border-color: rgba($black, 0.1);

// transition
$transition-speed: 0.2s;
$transition-easing: ease-in-out;
$transition-params: $transition-speed $transition-easing;

// z-index
$z-root: 0;
$z-header: calc($z-root + 10);
$z-above-all: calc($z-header + 10);

// card
$card-border-radius: 10px;
$card-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08);
$card-hover-box-shadow: 0 8px 20px 0 rgb(0 0 0 / 10%);

// accordion
$accordion-border-radius: 10px;
$accordion-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08);

//table
$table-border-color: rgba($black, 0.1);
$table-font-color: $black;

:root {
  /*************************************
	Typography
	**************************************/
  --body-font: normal normal #{$font-weight-regular} #{$font-size} / #{$font-line-height} #{$font-primary};
  --body-font-color: #{$black-800};
  --body-font-primary: #{$font-primary};

  --color-primary: #{$blue};

  --h1-color: #{$black};
  --h2-color: #{$black};
  --h3-color: #{$black};
  --h4-color: #{$black};
  --h5-color: #{$black};
  --h5-sub-title-color: #{$black-600};
  --h6-color: #{$black};

  --anchor-link-normal-color: #{$black-600};
  --anchor-link-hover-color: #{$black-600};

  /*************************************
	Header
	**************************************/
  --header-height: 5.6rem;
  @include media-min($xlarge) {
    --header-height: 7.2rem;
  }

  /*************************************
	Layout
	**************************************/
  --container-margin: 1.6rem;
  --container-max-width: calc(100vw - calc(var(--container-margin) * 2));
  --grid-column-gutter: 1.6rem 3.2rem;

  @include media-min($medium) {
    --grid-column-gutter: 3.2rem;
  }

  @include media-min($large) {
    --container-max-width: calc(#{$large} - calc(32px * 2) - calc(var(--container-margin) * 2));
  }

  @include media-min($xlarge) {
    --container-max-width: calc(#{$xlarge} - calc(32px * 2) - calc(var(--container-margin) * 2));
  }

  @include media-min($xxlarge) {
    --container-max-width: calc(#{$xxlarge} - calc(32px * 2) - calc(var(--container-margin) * 2));
  }

  /*************************************
	Defaults
	**************************************/
  --default-border-color: #{$gray};

  /*************************************
	Buttons
	*************************************/
  --button-primary-normal-bg-color: #{$blue};
  --button-primary-normal-border-color: #{$blue};
  --button-primary-normal-text-color: #{$white};

  --button-primary-hover-bg-color: #{$blue-medium};
  --button-primary-hover-border-color: #{$blue-medium};
  --button-primary-hover-text-color: #{$white};

  --button-secondary-normal-bg-color: transparent;
  --button-secondary-normal-border-color: #{$blue};
  --button-secondary-normal-text-color: #{$blue};

  --button-secondary-hover-bg-color: #{$blue};
  --button-secondary-hover-border-color: #{$blue};
  --button-secondary-hover-text-color: #{$white};

  --button-primary-disabled-bg-color: #{$gray};
  --button-primary-disabled-border-color: #{$gray};
  --button-primary-disabled-text-color: #{$black-400};

  --button-link-normal-text-color: #{$black};
  --button-link-hover-text-color: #{$blue};

  --button-text-normal-text-color: #{$black};
  --button-text-hover-text-color: #{$blue};

  /*************************************
	Card
	*************************************/
  --card-border-radius: #{$card-border-radius};
  --card-box-shadow: #{$card-box-shadow};
  --card-hover-box-shadow: #{$card-hover-box-shadow};
}