import { createTheme } from "@shopify/restyle";

const palette = {
	purpleLight: "#8C6FF7",
	purplePrimary: "#5A31F4",
	purpleDark: "#3F22AB",

	greenLight: "#56DCBA",
	greenPrimary: "#0ECD9D",
	greenDark: "#0A906E",

	black: "#0B0B0B",
	white: "#F0F2F3",
};

const theme = createTheme({
	colors: {
		mainBackground: palette.white,
		cardPrimaryBackground: palette.purplePrimary,
		black: palette.black,
	},
	spacing: {
		s: 8,
		m: 16,
		l: 24,
		xl: 40,
	},
	breakpoints: {
		phone: 0,
		tablet: 768,
	},
	textVariants: {
		header: {
			fontWeight: "bold",
			fontSize: 34,
		},
		body: {
			fontSize: 16,
			lineHeight: 24,
		},
		defaults: {
			// We can define a default text variant here.
		},
	},
	cardVariants: {
		defaults: {
			// We can define defaults for the variant here.
			// This will be applied after the defaults passed to createVariant and before the variant defined below.
		},
		regular: {
			// We can refer to other values in the theme here, and use responsive props
			padding: {
				phone: "s",
				tablet: "m",
			},
		},
		elevated: {
			padding: {
				phone: "s",
				tablet: "m",
			},
			shadowColor: "black",
			shadowOpacity: 0.5,
			shadowOffset: { width: 10, height: 10 },
			shadowRadius: 10,
			elevation: 5,
		},
	},
});

export type Theme = typeof theme;
export default theme;