:root {
	/* color */
	--clr-text-100: hsl(0, 0%, 90%);
	--clr-text-200: hsl(0, 0%, 80%);
	--clr-text-300: hsl(0, 0%, 70%);
	--clr-text-400: hsl(0, 0%, 60%);
	--clr-text-500: hsl(0, 0%, 50%); /* dimmed */
	--clr-text-600: hsl(0, 0%, 40%);
	--clr-text-700: hsl(0, 0%, 30%);
	--clr-text-800: hsl(0, 0%, 20%);
	--clr-text-900: hsl(0, 0%, 10%); /* default */

	--clr-background-0: hsl(0, 0%, 99%); /* default */
	--clr-background-50: hsl(0, 0%, 96%);
	--clr-background-100: hsl(0, 0%, 90%);
	--clr-background-200: hsl(0, 0%, 80%);
	--clr-background-300: hsl(0, 0%, 70%);
	--clr-background-400: hsl(0, 0%, 60%);
	--clr-background-500: hsl(0, 0%, 50%);
	--clr-background-600: hsl(0, 0%, 40%);
	--clr-background-700: hsl(0, 0%, 30%);
	--clr-background-800: hsl(0, 0%, 20%);
	--clr-background-900: hsl(0, 0%, 10%);

	--clr-primary-50: hsl(0, 57%, 95%);
	--clr-primary-100: hsl(0, 57%, 90%);
	--clr-primary-200: hsl(0, 55%, 80%);
	--clr-primary-300: hsl(0, 56%, 70%);
	--clr-primary-400: hsl(0, 55%, 60%);
	--clr-primary-500: hsl(0, 55%, 50%); /* default */
	--clr-primary-600: hsl(0, 55%, 40%);
	--clr-primary-700: hsl(0, 56%, 30%);
	--clr-primary-800: hsl(0, 55%, 20%);
	--clr-primary-900: hsl(0, 57%, 10%);

	--clr-secondary-100: hsl(0, 29%, 90%);
	--clr-secondary-200: hsl(2, 29%, 80%); /* default */
	--clr-secondary-300: hsl(1, 29%, 70%);
	--clr-secondary-400: hsl(2, 30%, 60%);
	--clr-secondary-500: hsl(2, 30%, 50%);
	--clr-secondary-600: hsl(2, 30%, 40%);
	--clr-secondary-700: hsl(1, 29%, 30%);
	--clr-secondary-800: hsl(2, 29%, 20%);
	--clr-secondary-900: hsl(0, 29%, 10%);

	--clr-accent-100: hsl(356, 80%, 90%);
	--clr-accent-200: hsl(356, 78%, 80%);
	--clr-accent-300: hsl(356, 79%, 70%);
	--clr-accent-400: hsl(356, 79%, 60%);
	--clr-accent-500: hsl(356, 79%, 50%);
	--clr-accent-600: hsl(356, 79%, 40%);
	--clr-accent-700: hsl(356, 79%, 30%); /* default */
	--clr-accent-800: hsl(356, 78%, 20%);
	--clr-accent-900: hsl(356, 80%, 10%);

	/* font family */
	--ff-sans: "Inter", sans-serif;

	/* font size */
	--fs-50: 0.75rem; /* 12px */
	--fs-75: 0.875rem; /* 14px */
	--fs-100: 1rem; /* 16px */
	--fs-200: 1.25rem;
	--fs-300: 1.5rem; /* 24px */
	--fs-400: 1.75rem;
	--fs-500: 2rem; /* 32px */
	--fs-600: 2.25rem;
	--fs-700: 2.5rem; /* 40px */
	--fs-800: 2.75rem;
	--fs-900: 3rem; /* 48px */

	/* Desktop (large) */
	--fs-heading: var(--fs-900);
	--fs-subheading: var(--fs-700);
	--fs-title: var(--fs-500);
	--fs-quote: var(--fs-200);
	--fs-body: var(--fs-100);
	--fs-small: var(--fs-50);
	--fs-button: var(--fs-100);

	/* Desktop (small) */
	@media only screen and (min-width: 1281px) and (max-width: 1366px) {
		--fs-heading: var(--fs-900);
		--fs-subheading: var(--fs-700);
		--fs-title: var(--fs-500);
		--fs-quote: var(--fs-200);
		--fs-body: var(--fs-100);
		--fs-button: var(--fs-100);
	}

	/* Tablet (landscape) */
	@media only screen and (min-width: 1025px) and (max-width: 1280px) {
		--fs-heading: var(--fs-800);
		--fs-subheading: var(--fs-600);
		--fs-title: var(--fs-400);
		--fs-quote: var(--fs-200);
		--fs-body: var(--fs-100);
		--fs-button: var(--fs-100);
	}

	/* Tablet (portrait) */
	@media only screen and (min-width: 768px) and (max-width: 1024px) {
		--fs-heading: var(--fs-800);
		--fs-subheading: var(--fs-600);
		--fs-title: var(--fs-400);
		--fs-quote: var(--fs-200);
		--fs-body: var(--fs-100);
		--fs-button: var(--fs-100);
	}

	/* Mobile (landscape) */
	@media only screen and (min-width: 481px) and (max-width: 767px) {
		--fs-heading: var(--fs-600);
		--fs-subheading: var(--fs-500);
		--fs-title: var(--fs-300);
		--fs-quote: var(--fs-100);
		--fs-body: var(--fs-100);
		--fs-button: var(--fs-100);
	}

	/* Mobile (portrait) */
	@media only screen and (max-width: 480px) {
		--fs-heading: var(--fs-600);
		--fs-subheading: var(--fs-500);
		--fs-title: var(--fs-300);
		--fs-quote: var(--fs-100);
		--fs-body: var(--fs-100);
		--fs-button: var(--fs-100);
	}

	/* font weight */
	--fw-light: 300;
	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--fw-heading: var(--fw-bold);
	--fw-subheading: var(--fw-semibold);
	--fw-title: var(--fw-medium);
	--fw-body: var(--fw-normal);

	/* line height */
	--lh-100: 1.5;
	--lh-200: 1.6;
	--lh-300: 1.7;
	--lh-400: 1.8;
	--lh-500: 1.9;
	--lh-600: 2;
	--lh-700: 2.1;
	--lh-800: 2.2;
	--lh-900: 2.3;

	--lh-heading: var(--lh-100);
	--lh-subheading: var(--lh-200);
	--lh-title: var(--lh-300);
	--lh-quote: var(--lh-200);
	--lh-body: var(--lh-100);

	/* spacing */
	--spacing-100: 0.5rem; /* 8px */
	--spacing-200: 1rem; /* 16px */
	--spacing-300: 1.5rem; /* 24px */
	--spacing-400: 2rem; /* 32px */
	--spacing-500: 2.5rem; /* 40px */
	--spacing-600: 3rem; /* 48px */
	--spacing-700: 3.5rem; /* 56px */
	--spacing-800: 4rem; /* 64px */
	--spacing-900: 5rem; /* 80px */
	--spacing-950: 7.5rem; /* 120px */

	/* z-index */
	--z-tooltip: 10;
	--z-fixed: 100;
}