// Core variables
$version: '1.0.0-alpha.2';

// Core features
$rtl: false !default;

// CSS variable.
$var-prefix: 's'; // It's used to make css variable names unique. --#{var-prefix}-#{name}

/*
  Core colors.
*/
// Accent.
$accent-color: #9932CC !default; // CSS variable.

// Dark.
$dark-color: #303742 !default; // CSS variable.

// Light.
$light-color: #fff !default; // CSS variable.

// Primary.
$primary-color: #5755d9 !default; // CSS variable.
$primary-color-dark: darken($primary-color, 3%) !default; // CSS variable.
$primary-color-light: lighten($primary-color, 3%) !default; // CSS variable.

// Secondary.
$secondary-color: lighten($primary-color, 37.5%) !default; // CSS variable.
$secondary-color-dark: darken($secondary-color, 3%) !default; // CSS variable.
$secondary-color-light: lighten($secondary-color, 3%) !default; // CSS variable.

/*
  Gray colors.
*/
$gray-color: lighten($dark-color, 55%) !default; // CSS variable.
$gray-color-dark: darken($gray-color, 30%) !default; // CSS variable.
$gray-color-light: lighten($gray-color, 20%) !default; // CSS variable.

/*
  Background colors.
*/
$bg-color: lighten($dark-color, 75%) !default; // CSS variable.
$bg-color-dark: darken($bg-color, 3%) !default; // CSS variable.
$bg-color-light: $light-color !default; // CSS variable.

/*
  Border colors.
*/
$border-color: lighten($dark-color, 65%) !default; // CSS variable.
$border-color-dark: darken($border-color, 10%) !default; // CSS variable.
$border-color-light: lighten($border-color, 8%) !default; // CSS variable.

/*
  Control colors.
*/
$disabled-color: $bg-color-dark !default; // ! CSS Variable. New control color.
$error-color: #e85600 !default; // CSS variable.
$info-color: #d9edf7 !default; // CSS variable.
$success-color: #32b643 !default; // CSS variable.
$warning-color: #ffb700 !default; // CSS variable.


// Link colors.
$link-color: $primary-color !default; // CSS variable.
$link-color-dark: darken($link-color, 10%) !default; // CSS variable.
$link-color-light: lighten($link-color, 10%) !default; // CSS variable.

/*
  Other colors.
*/
$code-color: #d73e48 !default; // CSS variable.
$highlight-color: #ffe9b3 !default; // CSS variable.

/*
  Body colors.
*/
$body-bg-color: $bg-color-light !default; // New SCSS variable, CSS variable.
$body-font-color: lighten($dark-color, 5%) !default; // CSS variable.

// 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;
$mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace !default;
$fallback-font-family: "Helvetica Neue", sans-serif !default;
$cjk-zh-hans-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $fallback-font-family !default;
$cjk-zh-hant-font-family: $base-font-family, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", $fallback-font-family !default;
$cjk-jp-font-family: $base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, $fallback-font-family !default;
$cjk-ko-font-family: $base-font-family, "Malgun Gothic", $fallback-font-family !default;
$body-font-family: $base-font-family, $fallback-font-family !default;

// Unit sizes.
$unit-o: 0.05rem !default; // ! New CSS variable.
$unit-h: 0.1rem !default; // ! New CSS variable.
$unit-1: 0.2rem !default; // ! New CSS variable.
$unit-2: 0.4rem !default; // ! New CSS variable.
$unit-3: 0.6rem !default; // ! New CSS variable.
$unit-4: 0.8rem !default; // ! New CSS variable.
$unit-5: 1rem !default; // ! New CSS variable.
$unit-6: 1.2rem !default; // ! New CSS variable.
$unit-7: 1.4rem !default; // ! New CSS variable.
$unit-8: 1.6rem !default; // ! New CSS variable.
$unit-9: 1.8rem !default; // ! New CSS variable.
$unit-10: 2rem !default; // ! New CSS variable.
$unit-12: 2.4rem !default; // ! New CSS variable.
$unit-16: 3.2rem !default; // ! New CSS variable.

// Font sizes.
$html-font-size: 20px !default; // ! New CSS variable.
$font-size: 0.8rem !default; // ! New CSS variable.
$font-size-sm: 0.7rem !default; // ! New CSS variable.
$font-size-lg: 0.9rem !default; // ! New CSS variable.

// Line height.
$html-line-height: 1.5 !default; // ! New CSS variable.
$line-height: 1.2rem !default; // ! New CSS variable.

/*
  Sizes.
*/
// Layout.
$layout-spacing: $unit-2 !default; // ! New CSS variable.
$layout-spacing-sm: $unit-1 !default; // ! New CSS variable.
$layout-spacing-lg: $unit-4 !default; // ! New CSS variable.

// Border radius.
$border-radius: $unit-h !default; // ! New CSS variable.

// Border width.
$border-width: $unit-o !default; // ! New CSS variable.
$border-width-lg: $unit-h !default; // ! New CSS variable.

// Control size.
$control-size: $unit-9 !default; // ! New CSS variable.
$control-size-sm: $unit-7 !default; // ! New CSS variable.
$control-size-lg: $unit-10 !default; // ! New CSS variable.

// Control padding.
$control-padding-x: $unit-2 !default; // ! New CSS variable.
$control-padding-x-sm: $unit-2 * 0.75 !default; // ! New CSS variable.
$control-padding-x-lg: $unit-2 * 1.5 !default; // ! New CSS variable.
$control-padding-y: ($control-size - $line-height) * 0.5 - $border-width !default; // ! New CSS variable.
$control-padding-y-sm: ($control-size-sm - $line-height) * 0.5 - $border-width !default; // ! New CSS variable.
$control-padding-y-lg: ($control-size-lg - $line-height) * 0.5 - $border-width !default; // ! New CSS variable.

// Control icon.
$control-icon-size: 0.8rem !default; // ! New CSS variable.

// Control width.
$control-width-xs: 180px !default; // ! New CSS variable.
$control-width-sm: 320px !default; // ! New CSS variable.
$control-width-md: 640px !default; // ! New CSS variable.
$control-width-lg: 960px !default; // ! New CSS variable.
$control-width-xl: 1280px !default; // ! New CSS variable. Not used.

// Max Columns number.
$columns-count: 4;

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

$responsive-breakpoint: $size-xs !default; // ! New CSS variable.

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


/*
  Parallax
*/
$parallax-deg: 3deg !default;
$parallax-offset: 4.5px !default;
$parallax-offset-z: 50px !default;
$parallax-perspective: 1000px !default;
$parallax-scale: 0.95 !default;
$parallax-fade-color: #ffffff !default;

/*
  Transition duration

*/
$transition-duration: 0.2s; // ! New + CSS variable.