@use "sass:list";
@use "sass:map";
@use "sass:math";
@use "pkg:iro-sass/easing" as easing;

$static-colors: (
	--base: hsl(0, 0%, 98%),
	--levels: (
		--100: math.div(0, 12) * 110 - 10,
		--200: math.div(1, 12) * 110 - 10,
		--300: math.div(2, 12) * 110 - 10,
		--400: math.div(3, 12) * 110 - 10,
		--500: math.div(4, 12) * 110 - 10,
		--600: math.div(5, 12) * 110 - 10,
		--700: math.div(6, 12) * 110 - 10,
		--800: math.div(7, 12) * 110 - 10,
		--900: math.div(8, 12) * 110 - 10,
		--1000: math.div(9, 12) * 110 - 10,
		--1100: math.div(10, 12) * 110 - 10,
		--1200: math.div(11, 12) * 110 - 10,
		--1300: math.div(12, 12) * 110 - 10,
	),

	--palettes: (
		--blue: oklch(56% 0.14 275.25),
		--purple: oklch(56% 0.14 305.58),
		--red: oklch(56% 0.14 14.69),
		--green: oklch(56% 0.14 150.48),
		--yellow: oklch(56% 0.14 84.08),
	),

	--transparents: (
		--100: 0,
		--200: 0.1,
		--300: 0.25,
		--400: 0.4,
		--500: 0.55,
		--600: 0.7,
		--700: 0.8,
		--800: 0.9,
		--900: 1,
	),
);

$semantic-colors-common: (
	--accent: --blue,
	--accent-static: --blue-static,
	--positive: --green,
	--positive-static: --green-static,
	--negative: --red,
	--negative-static: --red-static,
	--warning: --yellow,
	--warning-static: --yellow-static,

	--focus-raw: --accent,
	--focus-static: --accent-static,

	--border-mute: --base --200,
	--border: --base --300,
	--border-strong: --base --400,
	--text-disabled: --base --500,
	--text-mute-more: --base --600,
	--text-mute: --base --700,
	--text: --base --800,
	--heading: --base --900,
	--focus: (
		--outline: --focus-raw --400,
		--border-mute: --focus-raw --900,
		--border: --focus-raw --1000,
		--border-text: --focus-raw --1000-text,
		--border-strong: --focus-raw --1100,
		--text: --focus-raw --1100,
	),
);

$theme-light: (
	--levels: (
		--grays: (
			--50: (
				-8,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(0, 12)),
			),
			--75: (
				-4,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(1, 12)),
			),
			--100: (0)
			(
				0.2 + 0.8 * easing.ease(math.div(2, 12)),
			),

			--200: (
				easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(1, 7)) * 98,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(3, 12)),
			),
			--300: (
				easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(2, 7)) * 98,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(4, 12)),
			),
			--400: (
				easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(3, 7)) * 98,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(5, 12)),
			),

			--500: (
				easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(4, 7)) * 98,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(6, 12)),
			),
			--600: (
				easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(5, 7)) * 98,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(7, 12)),
			),
			--700: (
				easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(6, 7)) * 98,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(8, 12)),
			),
			--800: (
				easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(7, 7)) * 98,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(9, 12)),
			),
			--900: (106)
			(
				0.2 + 0.8 * easing.ease(math.div(10, 12)),
			),
		),

		--colors: (
			--100: (
				math.div(0, 12) * 94 + 7,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(0, 12)),
			),
			--200: (
				math.div(1, 12) * 94 + 7,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(1, 12)),
			),
			--300: (
				math.div(2, 12) * 94 + 7,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(2, 12)),
			),
			--400: (
				math.div(3, 12) * 94 + 7,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(3, 12)),
			),
			--500: (
				math.div(4, 12) * 94 + 7,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(4, 12)),
			),
			--600: (
				math.div(5, 12) * 94 + 7,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(5, 12)),
			),
			--700: (
				math.div(6, 12) * 94 + 7,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(6, 12)),
			),
			--800: (
				math.div(7, 12) * 94 + 7,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(7, 12)),
			),
			--900: (
				math.div(8, 12) * 94 + 7,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(8, 12)),
			),
			--1000: (
				math.div(9, 12) * 94 + 7,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(9, 12)),
			),
			--1100: (
				math.div(10, 12) * 94 + 7,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(10, 12)),
			),
			--1200: (
				math.div(11, 12) * 94 + 7,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(11, 12)),
			),
			--1300: (
				math.div(12, 12) * 94 + 7,
			)
			(
				0.2 + 0.8 * easing.ease(math.div(12, 12)),
			),
		),
	),

	--palettes: (
		--base: hsl(260, 70%, 98%) --grays,
		--blue: oklch(56% 0.16 275.25) --colors,
		--purple: oklch(56% 0.16 305.58) --colors,
		--red: oklch(56% 0.16 14.69) --colors,
		--green: oklch(56% 0.16 150.48) --colors,
		--yellow: oklch(56% 0.16 84.08) --colors,
	),

	--semantic: map.merge(
			$semantic-colors-common,
			(
				--bg-l2: --base --50,
				--bg-l1: --base --100,
				--bg-base: --base --200,
				--box: (
					--border: --base --200,
					--border-strong: --base --300,
				),
			)
		),
	--constants: (
		--shadow: rgba(#000, 0.1),
	),
);

$theme-dark: (
	--levels: (
		--grays: (
			--50: (4.4)
			(
				0.3 + 0.7 * easing.ease(math.div(10, 12)),
			),
			--75: (2.5)
			(
				0.3 + 0.7 * easing.ease(math.div(9, 12)),
			),
			--100: (0)
			(
				0.3 + 0.7 * easing.ease(math.div(8, 12)),
			),

			--200: (
				easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(1, 8)) * -108,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(7, 12)),
			),
			--300: (
				easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(2, 8)) * -108,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(6, 12)),
			),
			--400: (
				easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(3, 8)) * -108,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(5, 12)),
			),

			--500: (
				easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(4, 8)) * -108,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(4, 12)),
			),
			--600: (
				easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(5, 8)) * -108,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(3, 12)),
			),
			--700: (
				easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(6, 8)) * -108,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(2, 12)),
			),
			--800: (
				easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(7, 8)) * -108,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(1, 12)),
			),
			--900: (
				easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(8, 8)) * -108,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(0, 12)),
			),
		),

		--colors: (
			--100: (
				easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(0, 12)) * -109 - 0.5,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(0, 12)),
			),
			--200: (
				easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(1, 12)) * -109 - 0.5,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(1, 12)),
			),
			--300: (
				easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(2, 12)) * -109 - 0.5,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(2, 12)),
			),
			--400: (
				easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(3, 12)) * -109 - 0.5,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(3, 12)),
			),
			--500: (
				easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(4, 12)) * -109 - 0.5,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(4, 12)),
			),
			--600: (
				easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(5, 12)) * -109 - 0.5,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(5, 12)),
			),
			--700: (
				easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(6, 12)) * -109 - 0.5,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(6, 12)),
			),
			--800: (
				easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(7, 12)) * -109 - 0.5,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(7, 12)),
			),
			--900: (
				easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(8, 12)) * -109 - 0.5,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(8, 12)),
			),
			--1000: (
				easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(9, 12)) * -109 - 0.5,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(9, 12)),
			),
			--1100: (
				easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(10, 12)) * -109 - 0.5,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(10, 12)),
			),
			--1200: (
				easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(11, 12)) * -109 - 0.5,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(11, 12)),
			),
			--1300: (
				easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(12, 12)) * -109 - 0.5,
			)
			(
				0.3 + 0.7 * easing.ease(math.div(12, 12)),
			),
		),
	),

	--palettes: (
		--base: hsl(257, 7%, 20%) --grays,
		--blue: oklch(56% 0.16 275.25) --colors,
		--purple: oklch(56% 0.16 305.58) --colors,
		--red: oklch(56% 0.16 14.69) --colors,
		--green: oklch(56% 0.16 150.48) --colors,
		--yellow: oklch(56% 0.16 84.08) --colors,
	),

	--semantic: map.merge(
			$semantic-colors-common,
			(
				--bg-base: --base --50,
				--bg-l1: --base --75,
				--bg-l2: --base --100,
				--box: (
					--border: --base --100,
					--border-strong: --base --100,
				),
			)
		),
	--constants: (
		--shadow: rgba(#000, 0.35),
	),
);