// ===
// Theme
// ===
$color-primary: #5DBFD6;
$color-primary-hover: #7FA799;
$color-primary-light: #EDF3F0;
$color-primary-dark: #135377;
$color-secondary: #EA6A2A;
$color-secondary-light: #FCF4EC;
$color-secondary-dark: #BB8071;
$color-site:#1B2B55;
$color-site-btn:#4CB0CC;

// ===
// Text
// ===
$color-text: #5A5A5A;
$color-text-dark: #575c5c;

// ===
// State
// ===
$color-success: #429352;
$color-warning: #DD954E;
$color-danger: #EC5151;
$color-info: #909399;

// ===
// Line
// ===
$color-line: #c6c6ba;

// ===
// Color
// ===
$colors-text-map: (
  "primary": $color-primary,
  "primary-light": $color-primary-light,
  "primary-dark": $color-primary-dark,
  "secondary": $color-secondary,
  "secondary-light": $color-secondary-light,
  "secondary-dark": $color-secondary-dark,
  "text": $color-text,
  "text-dark": $color-text-dark,
  "white": #fff,
  "line": $color-line,
  "success": $color-success,
  "warn": $color-warning,
  "danger": $color-danger,
  "info": $color-info,
  "site":$color-site,
  "site-btn":$color-site-btn,
  "transparent": transparent,
);

@each $color, $value in $colors-text-map {
  .bg-#{$color} {
    background: $value !important;
  }
  .color-#{$color} {
    color: $value
  }
  .hover\:color-#{$color} {
    &:hover {
      color: $value
    }
  }
}

// 讓編輯器能有自動完成文字的多於程式碼
.bg-primary {}
.bg-primary-dark {}
.bg-primary-light {}
.bg-secondary {}
.bg-text {}
.bg-text-dark {}
.bg-white {}
.bg-success {}
.bg-warn {}
.bg-danger {}
.bg-info {}
.bg-transparent {}

.color-primary {}
.color-primary-dark {}
.color-primary-light {}
.color-secondary {}
.color-text {}
.color-text-dark {}
.color-white {}
.color-success {}
.color-warn {}
.color-danger {}
.color-info {}
.color-transparent {}

.hover\:color-primary {}
.hover\:color-primary-dark {}
.hover\:color-primary-light {}
.hover\:color-secondary {}
.hover\:color-text {}
.hover\:color-text-dark {}
.hover\:color-white {}
.hover\:color-success {}
.hover\:color-warn {}
.hover\:color-danger {}
.hover\:color-info {}
.hover\:color-transparent {}


// ===
// Letter Spacing
// ===
.ls-25 {
  letter-spacing: 0.25em;
}

.ls-1 {
  letter-spacing: 0.1em;
}

// ===
// Line Height
// ===
.lh-2 {
  line-height: 2;
}