Emotion Theme

const theme = {
	spacing: {
		maxWidth: "1280px",
		maxWidthLimit: "1440px",
		paddingTopBody: {
			mobile: "76px",
			desktop: "76px",
		},
		marginContainer: {
			mobile: "20px",
			desktop: "20px",
		},
		marginRow: {
			default: "-10px",
			medium: "-30px",
			big: "-50px",
		},
		gutterCol: {
			default: "10px",
			medium: "30px",
			big: "50px",
		},
		breakpoints: [0, 576, 768, 992, 1200, 1440, 1920],
	},
	colors: {
		primaryLight: "#fda4af",
		primary: "#f43f5e",
		primaryDark: "#9f1239",
		secondaryLight: "#7dd3fc",
		secondary: "#0ea5e9",
		secondaryDark: "#075985",
		tertiaryLight: "#d8b4fe",
		tertiary: "#a855f7",
		tertiaryDark: "#6b21a8",
		dark: "#000000",
		light: "#ffffff",
		grayLight: "#e5e7eb",
		gray: "#9ca3af",
		grayDark: "#4b5563",
		success: "#28a745",
		error: "#dc3545",
		warning: "#ffc107",
		info: "#17a2b8",
	},
	fonts: {
		text: "Inter",
		head: "Inter",
		special: "Inter",
		mono: "Roboto Mono",
	},
	sizes: {
		hero1: {
			size: {
				mobile: "52px",
				desktop: "62px",
			},
			lineheight: {
				mobile: "1.15",
				desktop: "1.15",
			},
		},
		hero2: {
			size: {
				mobile: "42px",
				desktop: "52px",
			},
			lineheight: {
				mobile: "1.15",
				desktop: "1.15",
			},
		},
		hero3: {
			size: {
				mobile: "32px",
				desktop: "42px",
			},
			lineheight: {
				mobile: "1.15",
				desktop: "1.15",
			},
		},
		h1: {
			size: {
				mobile: "30px",
				desktop: "40px",
			},
			lineheight: {
				mobile: "1.20",
				desktop: "1.20",
			},
		},
		h2: {
			size: {
				mobile: "22px",
				desktop: "32px",
			},
			lineheight: {
				mobile: "1.20",
				desktop: "1.20",
			},
		},
		h3: {
			size: {
				mobile: "18px",
				desktop: "28px",
			},
			lineheight: {
				mobile: "1.20",
				desktop: "1.20",
			},
		},
		h4: {
			size: {
				mobile: "16px",
				desktop: "24px",
			},
			lineheight: {
				mobile: "1.30",
				desktop: "1.30",
			},
		},
		h5: {
			size: {
				mobile: "14px",
				desktop: "20px",
			},
			lineheight: {
				mobile: "1.40",
				desktop: "1.40",
			},
		},
		h6: {
			size: {
				mobile: "12px",
				desktop: "18px",
			},
			lineheight: {
				mobile: "1.40",
				desktop: "1.40",
			},
		},
		eyebrow: {
			size: {
				mobile: "16px",
				desktop: "18px",
			},
			lineheight: {
				mobile: "1.35",
				desktop: "1.15",
			},
		},
		subtitle: {
			size: {
				mobile: "18px",
				desktop: "20px",
			},
			lineheight: {
				mobile: "1.35",
				desktop: "1.35",
			},
		},
		button: {
			size: {
				mobile: "16px",
				desktop: "16px",
			},
			lineheight: {
				mobile: "1.00",
				desktop: "1.00",
			},
		},
		buttonBig: {
			size: {
				mobile: "18px",
				desktop: "18px",
			},
			lineheight: {
				mobile: "1.00",
				desktop: "1.00",
			},
		},
		lead: {
			size: {
				mobile: "16px",
				desktop: "18px",
			},
			lineheight: {
				mobile: "1.35",
				desktop: "1.45",
			},
		},
		input: {
			size: {
				mobile: "16px",
				desktop: "16px",
			},
			lineheight: {
				mobile: "1.00",
				desktop: "1.00",
			},
		},
		inputBig: {
			size: {
				mobile: "18px",
				desktop: "18px",
			},
			lineheight: {
				mobile: "1.00",
				desktop: "1.00",
			},
		},
		strong: {
			size: {
				mobile: "14px",
				desktop: "16px",
			},
			lineheight: {
				mobile: "1.50",
				desktop: "1.50",
			},
		},
		text: {
			size: {
				mobile: "14px",
				desktop: "16px",
			},
			lineheight: {
				mobile: "1.50",
				desktop: "1.50",
			},
		},
		small: {
			size: {
				mobile: "12px",
				desktop: "14px",
			},
			lineheight: {
				mobile: "1.30",
				desktop: "1.30",
			},
		},
		blockquote: {
			size: {
				mobile: "14px",
				desktop: "18px",
			},
			lineheight: {
				mobile: "1.50",
				desktop: "1.50",
			},
		},
		code: {
			size: {
				mobile: "14px",
				desktop: "18px",
			},
			lineheight: {
				mobile: "1.50",
				desktop: "1.50",
			},
		},
	},
};

export { theme };