.define-color(@key, @value) {
  .text-@{key} {
    color: @value;
  }
  .bg-@{key} {
    background-color: @value;
  }
  .border-@{key} {
    border-color: @value;
  }
}

.define-color-grad(@key, @a, @b, @angle:0deg) {
  .text-@{key} {
    background-image: -webkit-linear-gradient(@a, @b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .bg-@{key} {
    background-image: linear-gradient(@angle, @a 0%, @b 100%);
  }
  .border-@{key} {
    border-color: @a;
  }
}

// サービスのメインカラー
.define-color(main, hsl(210, 100%, 51%)) !important;
// 通常色
.define-color(normal, hsl(0, 0%, 24%)) !important;
// 弱色
.define-color(weak, hsl(0, 0%, 66%)) !important;
// リンク色
.define-color(link, hsl(210, 90%, 54%)) !important;
// 強調色
.define-color-grad(primary, hsl(210, 100%, 51%), hsl(250, 100%, 81%), 135deg) !important;
// 危険色
.define-color(danger, hsl(12, 74%, 49%)) !important;

// グレー系
// 濃い, 深い
.define-color(deepgray, #9E9E9E) !important;
// ソフト
.define-color(softgray, #B2BDC6) !important;
// 薄い, 淡い
.define-color(palegray, hsla(207, 15%, 74%, 0.1)) !important;