$theme: 'default' !default; // or 'obscure'
$rtl: false !default;

@import "colors";

// Core colors
$primary-color: $blue-color !default;

$primary-color-dark: darken($primary-color, 3%) !default;
$primary-color-light: lighten($primary-color, 3%) !default;
$secondary-color: lighten($primary-color, 30%) !default;

// BG colors
$bg-color-light: $light-color; // light
$bg-color-dark: $dark-color !default; // dark

$bg-color: $light-1-color !default; // body bg color
$bg-0-color: rgba($dark-color, .1) !default;
$bg-1-color: $light-color !default; // secondary color
$bg-2-color: $light-3-color !default; //

$font-color: $dark-color !default;
$font-secondary-color: rgba($font-color, .5) !default;
$font-color-dark: $font-color !default;

$border-color: $bg-0-color !default;
$border-color-dark: $border-color !default;

// Dark theme
@if $theme == 'obscure' {
  $bg-color: $dark-1-color; // bg color
  $bg-0-color: rgba($light-color, .05); 
  $bg-1-color: $dark-2-color; // secondary color
  $bg-2-color: $dark-3-color; // secondary 2 color

  $font-color: $light-color;
  $font-secondary-color: rgba($font-color, .5);

  $border-color: $bg-0-color;
}

// Control colors
$success-color: $green-color !default;
$warning-color: $orange-color !default;
$error-color: $red-color !default;

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

// 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: .05rem !default;
$unit-h: .1rem !default;
$unit-1: .2rem !default;
$unit-2: .4rem !default;
$unit-3: .5rem !default;
$unit-4: .8rem !default;
$unit-5: 1rem !default;
$unit-6: 1.2rem !default;
$unit-7: 1.4rem !default;
$unit-8: 1.6rem !default;
$unit-9: 1.8rem !default;
$unit-10: 2rem !default;
$unit-12: 2.4rem !default;
$unit-14: 2.8rem !default;
$unit-16: 3.2rem !default;

// Font sizes
$html-font-size: 20px !default;
$html-line-height: 1.5 !default;
$font-size: .8rem !default;
$font-size-xs: .6rem !default;
$font-size-sm: .7rem !default;
$font-size-lg: .9rem !default;
$line-height: 1.2rem !default;

// Sizes
$layout-spacing: $unit-5 !default;
$layout-spacing-sm: $unit-1 !default;
$layout-spacing-lg: $unit-4 !default;
$border-radius-sm: $unit-1 !default;
$border-radius: $unit-2 !default;
$border-width: $unit-o !default;
$border-width-lg: $unit-h !default;
$control-size: $unit-10 !default;
$control-size-xs: $unit-4 !default;
$control-size-sm: $unit-6 !default;
$control-size-lg: $unit-14 !default;
$control-padding: $unit-5 !default;
$control-padding-x: $unit-4 !default;
$control-padding-x-sm: $unit-2 * .75 !default;
$control-padding-x-lg: $unit-3 * 1.5 !default;
$control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
$control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
$control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
$control-icon-size: .8rem !default;

$control-width-xxs: 150px !default;
$control-width-xs: 180px !default;
$control-width-sm: 320px !default;
$control-width-md: 640px !default;
$control-width-lg: 960px !default;
$control-width-xl: 1280px !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;

$responsive-breakpoint: $size-xs !default;

$nav-height: 2.5rem !default;

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

/* Animation */
$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;

$animation-curve-default: $animation-curve-fast-out-slow-in !default;

/* Shadows */
$shadow-key-umbra-opacity: 0.2 !default;
$shadow-key-penumbra-opacity: 0.14 !default;
$shadow-ambient-shadow-opacity: 0.12 !default;

//$shadow-0: 

// FAB button
$button-fab-size: 3rem !default;
$button-fab-size-sm: 2rem !default;
$button-fab-font-size: 1rem !default;