import * as stylex from "@stylexjs/stylex";

export const size = stylex.defineVars({
	px0: "0px",
	px0_5: "2px",
	px1: "4px",
	px1_5: "6px",
	px2: "8px",
	px2_5: "10px",
	px3: "12px",
	px3_5: "14px",
	px4: "16px",
	px5: "20px",
	px6: "24px",
	px7: "28px",
	px8: "32px",
	px9: "36px",
	px10: "40px",
	px11: "44px",
	px12: "48px",
	px14: "56px",
	px15: "60px",
	px16: "64px",
	px20: "80px",
	px24: "96px",
	px28: "112px",
	px32: "128px",
	px36: "144px",
	px40: "160px",
	px44: "176px",
	px48: "192px",
	px52: "208px",
	px56: "224px",
	px60: "240px",
	px64: "256px",
	px72: "288px",
	px80: "320px",
	px96: "384px",
	px150: "600px",
	px256: "1024px",

	n_px0_5: "-2px",
	n_px1: "-4px",
	n_px1_5: "-6px",
	n_px2: "-8px",
	n_px2_5: "-10px",
	n_px3: "-12px",
	n_px3_5: "-14px",
	n_px4: "-16px",
	n_px5: "-20px",
	n_px6: "-24px",
	n_px7: "-28px",
	n_px8: "-32px",
	n_px9: "-36px",
	n_px10: "-40px",
	n_px11: "-44px",
	n_px12: "-48px",
	n_px14: "-56px",
	n_px15: "-60px",
	n_px16: "-64px",
	n_px20: "-80px",
	n_px24: "-96px",
	n_px28: "-112px",
	n_px32: "-128px",
	n_px36: "-144px",
	n_px40: "-160px",
	n_px44: "-176px",
	n_px48: "-192px",
	n_px52: "-208px",
	n_px56: "-224px",
	n_px60: "-240px",
	n_px64: "-256px",
	n_px72: "-288px",
	n_px80: "-320px",
	n_px96: "-384px",
	n_px150: "-600px",
	n_px256: "-1024px",

	rem0: "0rem",
	rem0_5: ".125rem",
	rem1: ".25rem",
	rem1_5: ".375rem",
	rem2: ".5rem",
	rem2_5: ".625rem",
	rem3: ".75rem",
	rem3_5: ".875rem",
	rem4: "1rem",
	rem5: "1.25rem",
	rem6: "1.5rem",
	rem7: "1.75rem",
	rem8: "2rem",
	rem9: "2.25rem",
	rem10: "2.5rem",
	rem11: "2.75rem",
	rem12: "3rem",
	rem14: "3.5rem",
	rem15: "3.75rem",
	rem16: "4rem",
	rem20: "5rem",
	rem24: "6rem",
	rem28: "7rem",
	rem32: "8rem",
	rem36: "9rem",
	rem40: "10rem",
	rem44: "11rem",
	rem48: "12rem",
	rem52: "13rem",
	rem56: "14rem",
	rem60: "15rem",
	rem64: "16rem",
	rem72: "18rem",
	rem80: "20rem",
	rem96: "24rem",
	rem150: "37.5rem",
	rem256: "64rem",

	n_rem0_5: "-.125rem",
	n_rem1: "-.25rem",
	n_rem1_5: "-.375rem",
	n_rem2: "-.5rem",
	n_rem2_5: "-.625rem",
	n_rem3: "-.75rem",
	n_rem3_5: "-.875rem",
	n_rem4: "-1rem",
	n_rem5: "-1.25rem",
	n_rem6: "-1.5rem",
	n_rem7: "-1.75rem",
	n_rem8: "-2rem",
	n_rem9: "-2.25rem",
	n_rem10: "-2.5rem",
	n_rem11: "-2.75rem",
	n_rem12: "-3rem",
	n_rem14: "-3.5rem",
	n_rem15: "-3.75rem",
	n_rem16: "-4rem",
	n_rem20: "-5rem",
	n_rem24: "-6rem",
	n_rem28: "-7rem",
	n_rem32: "-8rem",
	n_rem36: "-9rem",
	n_rem40: "-10rem",
	n_rem44: "-11rem",
	n_rem48: "-12rem",
	n_rem52: "-13rem",
	n_rem56: "-14rem",
	n_rem60: "-15rem",
	n_rem64: "-16rem",
	n_rem72: "-18rem",
	n_rem80: "-20rem",
	n_rem96: "-24rem",
	n_rem150: "-37.5rem",
	n_rem256: "-64rem",
});

export const color = stylex.defineVars({
	transparent: "transparent",

	//#region white
	white000: "#ffffff",
	white900: "#f2f5f4",
	//#endregion
	//#region gray
	gray000: "#e1e1e2",
	gray100: "#a7a7a8",
	gray200: "#6d6d6f",
	gray300: "#505052",
	gray400: "#333335",
	gray500: "#252527",
	gray600: "#1e1e20",
	gray700: "#161618",
	gray800: "#0c0d0f",
	gray900: "#020306",
	//#endregion
	//#region red
	red150: "#fa3131",
	red400: "#7c0412",
	//#endregion
	//#region salmon
	salmon100: "#fa7355",
	salmon150: "#d9534f",
	salmon300: "#8f303d",
	//#endregion
	//#region orange
	orange100: "#f97f5b",
	orange150: "#ee4d2e",
	orange200: "#d23c22",
	orange300: "#9e2e1a",
	orange400: "#4c1f18",
	//#endregion
	//#region apricot
	apricot000: "#fdbe75",
	apricot100: "#f6ab09",
	apricot150: "#ffa51e",
	apricot200: "#fc8833",
	apricot300: "#91550f",
	//#endregion
	//#region mustard
	mustard000: "#fff28b",
	mustard100: "#f8d96a",
	mustard150: "#f7c516",
	mustard200: "#e5a813",
	//#endregion
	//#region olive
	olive100: "#f9f75d",
	olive200: "#bfbc06",
	olive300: "#807d00",
	olive500: "#4d4b00",
	olive600: "#2c2b0e",
	//#endregion
	//#region apple
	apple200: "#a7d713",
	apple400: "#646e05",
	//#endregion
	//#region spring
	spring100: "#81f07f",
	//#endregion
	//#region mint
	mint150: "#5bccb0",
	mint200: "#1db992",
	mint300: "#1a9174",
	mint400: "#196956",
	mint500: "#184138",
	//#endregion
	//#region sky
	sky100: "#75c0c7",
	//#endregion
	//#region blue
	blue100: "#5db5f9",
	blue150: "#008fff",
	blue200: "#0074cc",
	blue300: "#004f8c",
	blue400: "#0d3b60",
	//#endregion
	//#region iris
	iris100: "#9a75c7",
	//#endregion
	//#region pink
	pink100: "#ff5eb1",
	pink150: "#ff0082",
	pink200: "#b0005b",
	pink300: "#8c0048",
	pink500: "#450d2b",
	//#endregion
	//#region blush
	blush100: "#e26f91",
	//#endregion
});

export const specialColors = stylex.defineVars({
	sfw: "#5cb85c",
	nsfw: "#f0ad4e",
	nsfl: "#d9534f",
	nsfp: "#69ccca",
	pol: "#0b2f86",
});

export const blackAlpha = stylex.defineVars({
	blackAlpha20: "rgba(0,0,0,.2)",
	blackAlpha40: "rgba(0,0,0,.4)",
	blackAlpha60: "rgba(0,0,0,.6)",
});

export const markColor = stylex.defineVars({
	0: "#ffffff",
	1: "#e108e9",
	2: "#5bb91c",
	3: "#ff9900",
	4: "#444444",
	5: "#008fff",
	6: "#6c432b",
	7: "#1cb992",
	8: "#d23c22",
	9: "#1cb992",
	10: "#addc8d",
	11: "#7fc7ff",
	12: "#c52b2f",
	13: "#10366f",
	14: "#ffc166",
	15: "#ea9fa1",
	16: "#337fd2",
	17: "#c52b2f",
});

const fallbackFonts = `"Helvetica Neue LT Pro", Helvetica, -apple-system, sans-serif`;

export const font = stylex.defineVars({
	main: `"Inter Variable", Inter, ${fallbackFonts}`,
	monospace: `"Cascadia Mono", Consolas, monospace`,
});

export const fontSize = stylex.defineVars({
	h1: "2.188rem",
	h2: "1.75rem",
	h3: "1.313rem",
	h4: "1.094rem",
	h5: "0.875rem",
	h6: "0.875rem",
	default: "1rem",
	body: "0.875rem",
	sub: "0.75rem",
	tiny: "0.656rem",
});

export const weight = stylex.defineVars({
	normal: "normal",
});

export const controlWeight = stylex.defineVars({
	button: weight.normal,
});

export const duration = stylex.defineVars({
	fast: "0.125s",
	default: "0.25s",
	slow: "0.5s",
	verySlow: "0.75s",
	ultraSlow: "1s",
});

export const timingFunction = stylex.defineVars({
	bounce: "cubic-bezier(0, 1.5, 1, 1)",
	fast: "cubic-bezier(0.19, 1, 0.22, 1)",
});

export const radius = stylex.defineVars({
	circle: "100vw",
});

export const headingMargin = stylex.defineVars({
	h1Top: "3rem",
	h1Bottom: "2rem",

	h2Top: "2rem",
	h2Bottom: "1.5rem",

	h3Top: "1.5rem",
	h3Bottom: "1.25rem",

	h4Top: "1.25rem",
	h4Bottom: "0.75rem",

	h5Top: "1rem",
	h5Bottom: "0.5rem",

	h6Top: "1rem",
	h6Bottom: "1rem",
});

export const headingWeight = stylex.defineVars({
	h1: 500,
	h2: 500,
	h3: 500,
	h4: 500,
	h5: 600,
	h6: 600,
});

export const transition = stylex.defineVars({
	a11yOutline: `outline-offset ${duration.fast} ease-out`,

	// Transitions important when changing color theme:
	themeBackground: `background-color ${duration.fast} ease-in-out`,
	themeBorderColor: `border-color ${duration.fast} ease-in-out`,
	themeColor: `background-color ${duration.fast} ease-in-out`,
});

export const padding = stylex.defineVars({
	minBottom4: `max(env(safe-area-inset-bottom), ${size.px4})`,
	minBottom16: `max(env(safe-area-inset-bottom), ${size.px16})`,
	inline: "max(env(safe-area-inset-left), env(safe-area-inset-right))",
});

export const margin = stylex.defineVars({
	minBottom4: `max(env(safe-area-inset-bottom), ${size.px4})`,
	minBottom16: `max(env(safe-area-inset-bottom), ${size.px16})`,
	inline: "max(env(safe-area-inset-left), env(safe-area-inset-right))",
});

export const borderRadius = stylex.defineVars({
	// Sometimes, UX uses 3.5 px for this, we round up to 4px to get it into our units (1 = 4px)
	sm: size.px1,
	m: size.px2,
	xl: size.px2,
});

export const navigation = stylex.defineVars({
	height: size.rem16,
	backdropFilter: "blur(120px)",
	background: `color-mix(in srgb, ${color.gray900} 60%, transparent)`,
	mobileBackground: color.gray900,
});

/**
 * Copied from old FE. Should be replaced with a different one from UX
 * Use as `filter: shadow.dialog`
 */
export const shadow = stylex.defineVars({
	dialog: "drop-shadow(0 20px 30px #000)",
});