// Core variables

// Fonts
// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto !default;
$fallback-font-family: "Helvetica Neue", sans-serif !default;
$cjk-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", $fallback-font-family !default;
$body-font-family: $base-font-family, $fallback-font-family !default;

// Sizes
$layout-padding: 1rem !default;
$layout-padding-lg: 1.5rem !default;
$control-min-width: 18rem !default;
$border-radius: .2rem !default;
$border-width: .1rem !default;

// Colors
// Core colors
$primary-color: #5764c6 !default;
$primary-color-dark: darken($primary-color, 3%) !default;
$primary-color-light: lighten($primary-color, 3%) !default;
$secondary-color: lighten($primary-color, 40%) !default;
$secondary-color-dark: darken($secondary-color, 3%) !default;
$secondary-color-light: lighten($secondary-color, 3%) !default;

$link-color: $primary-color !default;
$link-color-dark: darken($link-color, 10%) !default;

// Gray colors
$dark-color: #454d5d !default;
$light-color: #fff !default;
$gray-color: lighten($dark-color, 40%) !default;
$gray-color-dark: darken($gray-color, 20%) !default;
$gray-color-light: lighten($gray-color, 20%) !default;

$border-color: lighten($gray-color-light, 3%) !default;
$border-color-dark: darken($border-color, 15%) !default;
$bg-color: lighten($dark-color, 66%) !default;
$bg-color-dark: darken($bg-color, 3%) !default;
$bg-color-light: $light-color !default;

// Control colors
$control-color-success: #32b643 !default;
$control-color-warning: #ffb700 !default;
$control-color-error: #e85600 !default;

// Other colors
$code-color: #e06870 !default;
$highlight-color: #ffe9b3 !default;

// Global
$html-font-size: 10px !default;
$html-line-height: 1.428571429 !default;
$body-bg: $bg-color-light !default;
$body-font-color: lighten($dark-color, 5%) !default;
$font-size: 1.4rem !default;
$font-size-sm: 1.2rem !default;
$font-size-lg: 1.6rem !default;

// Responsive breakpoints
$size-xs: 480px !default;
$size-sm: 600px !default;
$size-md: 840px !default;
$size-lg: 960px !default;
$size-xl: 1280px !default;
$size-2x: 1440px !default;

// Z-index
$zindex-0: 1 !default;
$zindex-1: 100 !default;
$zindex-2: 200 !default;
$zindex-3: 300 !default;
$zindex-4: 400 !default;