/* $colors2: $lightness-values と、.c-, .bgc-, .bdc-定義用
-------------------------------------- */
$colors2: (
base: hsl(0, 0%, 100%),				//ベース色
secondary: hsl(194, 37%, 93%),	//ベース色2
//tertiary: hsl(30, 18%, 93%),	//ベース色3
text: hsl(0, 0%, 18%),					//テキスト色
text-300: hsl(0, 0%, 79%),			//#C9C9C9
text-400: hsl(0, 0%, 69%),
text-500: hsl(0, 0%, 58%),
text-600: hsl(0, 0%, 46%),
assort: #5B9CAC,								//アソート色（メイン・決定色）
assort-pl: hsl(192, 33%, 52%),	//pale（淡い色）
assort-dp: hsl(192, 33%, 44%),	//deep（濃い色）
accent: hsl(139, 100%, 27%),			//アクセント色
accent2: hsl(346, 100%, 40%),			//アクセント色2
option: hsl(177, 47%, 56%),	//任意・情報色（水色）
require: hsl(331, 100%, 64%),		//必須・注目色（赤）
warning: hsl(33, 100%, 50%),		//警告色（黄・オレンジ）
error: hsl(355, 100%, 45%),			//エラー色（赤）
gray: hsl(223, 0%, 46%),	//灰色	//#808080	//Webカラー
//caviar: hsl(203, 13%, 28%),	//黒
red: hsl(0, 100%, 46%),	//#ff0000	//Webカラー
raspberry: hsl(12, 78%, 44%),	//☑多用色
latte: hsl(20, 13%, 74%),	//#C5BAB4
carrot: hsl(23, 81%, 46%),
cinnamon: hsl(33,28%,46%),
banana: hsl(55,84%,79%),	//#F6EF9C
cassis: hsl(223, 62%, 18%),	//☑多用色
acai: hsl(278, 22%, 46%),
deeppink: hsl(328, 100%, 46%),	//☑多用色	//#ff1493	//Webカラー
);

$lightness-values: (
	25: 99%,
	50: 98%,
	100: 96%,
	150: 93%,
	200: 88%,
	250: 84%,
	300: 79%,
	350: 74%,
	400: 69%,
	450: 64%,
	500: 58%,
	550: 52%,
	600: 46%,
	650: 40%,
	700: 34%,
	750: 28%,
	800: 23%,
	850: 18%,
	900: 13%,
);

@function adjust-lightness($color, $lightness) {
	$hue: hue($color);
	$saturation: saturation($color);
	@return hsl($hue, $saturation, $lightness);
}

@mixin generate-colors($color-name, $color-value) {
	$hue: hue($color-value);
	$saturation: saturation($color-value);
	$lightness: lightness($color-value);
	--c-#{$color-name}: #{$color-value};

	@each $lightness-name,
	$lightness-value in $lightness-values {
		$new-color-name: "#{$color-name}-#{$lightness-name}";
		$new-color-value: adjust-lightness($color-value, $lightness-value);
		--c-#{$new-color-name}: #{$new-color-value};
	}
}

:root {

	@each $color-name,
	$color-value in $colors2 {
		@include generate-colors($color-name, $color-value);
	}
}

@each $color-name,
$color-value in $colors2 {

	/* .c-, .bgc-, .bdc- */
	.magique :is(*, .button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box, .list, .link, .input, .alert).c-#{$color-name},
	.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box):is(.is-plain, [class*=is-outline], .is-ghost).c-#{$color-name} {
		color: var(--c-#{$color-name});
		fill: var(--c-#{$color-name});
	}

	.magique :is(*, .button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box, .list, .link, .input, .alert).bgc-#{$color-name},
	.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box):is(.is-plain, [class*=is-outline], .is-ghost).bgc-#{$color-name} {
		background-color: var(--c-#{$color-name});
	}

	.magique :is(*, .button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box, .list, .link, .input, .alert).bdc-#{$color-name},
	.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box):is(.is-plain, [class*=is-outline], .is-ghost).bdc-#{$color-name} {
		border-color: var(--c-#{$color-name});
	}

	@each $lightness-name,
	$lightness-value in $lightness-values {
		$new-color-name: "#{$color-name}-#{$lightness-name}";

		.magique :is(*, .button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box, .list, .link, .input, .alert).c-#{$new-color-name},
		.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box):is(.is-plain, [class*=is-outline], .is-ghost).c-#{$new-color-name} {
			color: var(--c-#{$new-color-name});
			fill: var(--c-#{$new-color-name});
		}

		.magique :is(*, .button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box, .list, .link, .input, .alert).bgc-#{$new-color-name},
		.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box):is(.is-plain, [class*=is-outline], .is-ghost).bgc-#{$new-color-name} {
			background-color: var(--c-#{$new-color-name});
		}

		.magique :is(*, .button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box, .list, .link, .input, .alert).bdc-#{$new-color-name},
		.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box):is(.is-plain, [class*=is-outline], .is-ghost).bdc-#{$new-color-name} {
			border-color: var(--c-#{$new-color-name});
		}
	}
}




/* black
-------------------------------------- */
:root {
	--c-black: hsl(223, 0%, 0%);
	--c-black-l1: hsl(223, 0%, 8%);
	--c-black-50: hsl(223, 0%, 98%);
	--c-black-a0\.05: rgba(0, 0, 0, 0.05);
	--c-black-a0\.3: rgba(0, 0, 0, 0.3);
	--c-black-a0\.55: rgba(0, 0, 0, 0.55);
	--c-black-a0\.7: rgba(0, 0, 0, 0.7);
	--c-black-a0\.85: rgba(0, 0, 0, 0.85);
}

.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box).is-black {
	color: var(--c-black, #000);
	fill: var(--c-black, #000);
}

.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box).is-plain.is-black {
	border: none;
	border-color: var(--c-black-l1);
	background-color: var(--c-black, #000);
	color: #FFF;
}

.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box)[class*=is-outline].is-black {
	background-color: hsl(223, 0%, 100%);
	border: 0.0625em solid var(--c-black, #000);
	color: var(--c-black, #000);
	fill: var(--c-black, #000);
}

.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box).is-ghost.is-black {
	background-color: transparent;
	border: 0.0625em solid var(--c-black, #000);
	color: var(--c-black, #000);
	fill: var(--c-black, #000);
}

@media (any-hover: hover) {
	.magique .button:is([href], [onclick], [type=button], [type=submit]).is-black:is(:hover, :focus) {
		color: var(--c-black-l1);
		fill: var(--c-black-l1);
		opacity: 1;
	}

	.magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-black:is(:hover, :focus) {
		background-color: var(--c-black-l1);
		color: #FFF;
		opacity: 1;
	}

	.magique .button:is([href], [onclick], [type=button], [type=submit])[class*=is-outline].is-black:is(:hover, :focus) {
		border-color: transparent;
		background-color: var(--c-black, #000);
		color: #FFF;
		opacity: 1;
	}

	.magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-black:is(:hover, :focus) {
		background-color: var(--c-black, #000);
		color: #FFF;
		border-color: #FFF;
		opacity: 1;
	}
}

/* .link */
.magique .link.is-black {
	color: var(--c-black, #000);
	fill: var(--c-black, #000);
	border-color: var(--c-black, #000);
}

/* :hover */
@media (any-hover: hover) {
	.magique .link.is-black:is([href], [onclick], [type=button], [type=submit]):is(:hover, :focus) {
		color: var(--c-black-l1);
		fill: var(--c-black-l1);
		border-color: var(--c-black-l1);
	}

	.magique .link.is-black:is([href], [onclick], [type=button], [type=submit]):active {
		color: var(--c-black, #000);
		fill: var(--c-black, #000);
		border-color: var(--c-black, #000);
	}
}


/* .list */
.magique .list.is-black:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc], [data-helm], [data-helm_sp], [data-helm_pc])::before,
.magique .list.is-black:is([data-after], [data-after_sp], [data-after_pc], [data-last], [data-last_sp], [data-last_pc], [data-tail], [data-tail_sp], [data-tail_pc])::after,
.magique .list.is-black[style*="list-style"]>:is(li, dd)::before {
	color: var(--c-black, #000);
	fill: var(--c-black, #000);
}

.magique .list.is-black:is([class*="-circled"], [class*="-boxed"])[data-ini],
.magique .list.is-black:is([class*="-circled"], [class*="-boxed"])::before,
.magique .list.is-black:is([class*="-circled"], [class*="-boxed"])::after,
.magique .list.is-black:is([style*="circled-"], [style*="boxed-"])>:is(li, dd)::before {
	border-color: var(--c-black, #000);
	color: var(--c-black, #000);
	fill: var(--c-black, #000);
}

.magique .list.is-black[class*="filled-"]:is([class*="-circled"], [class*="-boxed"])[data-ini],
.magique .list.is-black[class*="filled-"]:is([class*="-circled"], [class*="-boxed"])::before,
.magique .list.is-black[class*="filled-"]:is([class*="-circled"], [class*="-boxed"])::after,
.magique .list.is-black[style*=filled-]:is([style*="circled-"], [style*="boxed-"])>:is(li, dd)::before {
	background-color: var(--c-black, #000);
	color: #FFF;
}


/* .input, .alert */
.magique :is(.input, .alert).is-black {
	background-color: var(--c-black-50);
	border-color: var(--c-black-a0\.55);
}


/* .c-, .bgc-, .bdc- */
.magique :is(*, .button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box, .list, .link, .input, .alert).c-black,
.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box):is(.is-plain, [class*=is-outline], .is-ghost).c-black {
	color: var(--c-black, #000);
	fill: var(--c-black, #000);
}

.magique :is(*, .button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box, .list, .link, .input, .alert).bgc-black,
.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box):is(.is-plain, [class*=is-outline], .is-ghost).bgc-black {
	background-color: var(--c-black, #000);
}

.magique :is(*, .button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box, .list, .link, .input, .alert).bdc-black,
.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box):is(.is-plain, [class*=is-outline], .is-ghost).bdc-black {
	border-color: var(--c-black, #000);
}




/* white
-------------------------------------- */
:root {
	--c-white: hsl(223, 0%, 100%);
	--c-white-50: hsl(223, 0%, 98%);
	--c-white-d1: hsl(223, 0%, 92%);
	--c-white-a0\.05: rgba(255, 255, 255, 0.05);
	--c-white-a0\.3: rgba(255, 255, 255, 0.3);
	--c-white-a0\.55: rgba(255, 255, 255, 0.55);
	--c-white-a0\.7: rgba(255, 255, 255, 0.7);
	--c-white-a0\.85: rgba(255, 255, 255, 0.85);
}

/* white */
.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box).is-white {
	color: var(--c-white, #FFF);
	fill: var(--c-white, #FFF);
}

.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box).is-plain.is-white {
	border: none;
	border-color: var(--c-white-d1);
	background-color: var(--c-white, #FFF);
	color: inherit;
	fill: inherit;
}

.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box)[class*=is-outline].is-white {
	background-color: var(--c-text, #2E2E2E);
	border: 0.0625em solid var(--c-white, #FFF);
	color: var(--c-white, #FFF);
	fill: var(--c-white, #FFF);
}

.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box).is-ghost.is-white {
	background-color: transparent;
	border: 0.0625em solid var(--c-white, #FFF);
	color: var(--c-white, #FFF);
	fill: var(--c-white, #FFF);
}

@media (any-hover: hover) {
	.magique .button:is([href], [onclick], [type=button], [type=submit]).is-white:is(:hover, :focus) {
		color: var(--c-white-d1);
		fill: var(--c-white-d1);
		opacity: 1;
	}

	.magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-white:is(:hover, :focus) {
		background-color: var(--c-white-d1);
		color: inherit;
		fill: inherit;
		opacity: 1;
	}

	.magique .button:is([href], [onclick], [type=button], [type=submit])[class*=is-outline].is-white:is(:hover, :focus) {
		border-color: transparent;
		background-color: var(--c-white, #FFF);
		color: inherit;
		fill: inherit;
		opacity: 1;
	}

	.magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-white:is(:hover, :focus) {
		background-color: var(--c-white, #FFF);
		color: inherit;
		fill: inherit;
		border-color: inherit;
		opacity: 1;
	}
}


/* .link */
.magique .link.is-white {
	color: var(--c-white, #FFF);
	fill: var(--c-white, #FFF);
	border-color: var(--c-white, #FFF);
}

/* :hover */
@media (any-hover: hover) {
	.magique .link.is-white:is([href], [onclick], [type=button], [type=submit]):is(:hover, :focus) {
		color: var(--c-white-d1);
		fill: var(--c-white-d1);
		border-color: var(--c-white-d1);
	}

	.magique .link.is-white:is([href], [onclick], [type=button], [type=submit]):active {
		color: var(--c-white, #FFF);
		fill: var(--c-white, #FFF);
		border-color: var(--c-white, #FFF);
	}
}


/* .list */
.magique .list.is-white:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc], [data-helm], [data-helm_sp], [data-helm_pc])::before,
.magique .list.is-white:is([data-after], [data-after_sp], [data-after_pc], [data-last], [data-last_sp], [data-last_pc], [data-tail], [data-tail_sp], [data-tail_pc])::after,
.magique .list.is-white[style*="list-style"]>:is(li, dd)::before {
	color: var(--c-white, #FFF);
	fill: var(--c-white, #FFF);
}

.magique .list.is-white:is([class*="-circled"], [class*="-boxed"])[data-ini],
.magique .list.is-white:is([class*="-circled"], [class*="-boxed"])::before,
.magique .list.is-white:is([class*="-circled"], [class*="-boxed"])::after,
.magique .list.is-white:is([style*="circled-"], [style*="boxed-"])>:is(li, dd)::before {
	border-color: var(--c-white, #FFF);
	color: var(--c-white, #FFF);
	fill: var(--c-white, #FFF);
}

.magique .list.is-white[class*="filled-"]:is([class*="-circled"], [class*="-boxed"])[data-ini],
.magique .list.is-white[class*="filled-"]:is([class*="-circled"], [class*="-boxed"])::before,
.magique .list.is-white[class*="filled-"]:is([class*="-circled"], [class*="-boxed"])::after,
.magique .list.is-white[style*=filled-]:is([style*="circled-"], [style*="boxed-"])>:is(li, dd)::before {
	background-color: var(--c-white, #FFF);
	color: var(--c-text, #2E2E2E);
	fill: var(--c-text, #2E2E2E);
}


/* .input, .alert */
.magique :is(.input, .alert).is-white {
	background-color: var(--c-white-50);
	border-color: var(--c-white-a0\.55);
}


/* .c-, .bgc-, .bdc- */
.magique :is(*, .button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box, .list, .link, .input, .alert).c-white,
.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box):is(.is-plain, [class*=is-outline], .is-ghost).c-white {
	color: var(--c-white, #FFF);
	fill: var(--c-white, #FFF);
}

.magique :is(*, .button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box, .list, .link, .input, .alert).bgc-white,
.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box):is(.is-plain, [class*=is-outline], .is-ghost).bgc-white {
	background-color: var(--c-white, #FFF);
}

.magique :is(*, .button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box, .list, .link, .input, .alert).bdc-white,
.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box):is(.is-plain, [class*=is-outline], .is-ghost).bdc-white {
	border-color: var(--c-white, #FFF);
}




/* transparent（透明色）
-------------------------------------- */
/* .bgc-, .bdc- */
.magique :is(*, .button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box, .list, .link, .input, .alert).bgc-transparent,
.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box):is(.is-plain, [class*=is-outline], .is-ghost).bgc-transparent {
	background-color: transparent;
}

.magique :is(*, .button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box, .list, .link, .input, .alert).bdc-transparent,
.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box):is(.is-plain, [class*=is-outline], .is-ghost).bdc-transparent {
	border-color: transparent;
}