:root {
	/* COLORS */
	--color-brand-black: #000;
	--color-brand-white: #fff;
	--color-brand-orange: #eb2814;
	--color-data-1-default: #deec28;
	--color-data-1-darker: #7e6f0f;
	--color-data-1-lighter: #f1f79b;
	--color-data-2-default: #52d545;
	--color-data-2-darker: #009c29;
	--color-data-2-lighter: #a0d99d;
	--color-data-3-default: #00e3b2;
	--color-data-3-darker: #005b37;
	--color-data-3-lighter: #7debc8;
	--color-data-4-default: #b609a7;
	--color-data-4-darker: #72068d;
	--color-data-4-lighter: #eabee3;
	--color-data-5-default: #4e2098;
	--color-data-5-darker: #37138c;
	--color-data-5-lighter: #b69bd7;
	--color-data-6-default: #e50a7c;
	--color-data-6-darker: #910966;
	--color-data-6-lighter: #f8bddb;
	--color-primary-7: #121212;
	--color-primary-100: #fff;
	--color-secondary-15: #262626;
	--color-secondary-30: #4d4d4d;
	--color-secondary-70: #b3b3b3;
	--color-secondary-90: #e6e6e6;
	--color-status-alert-default: #ff2a45;
	--color-status-alert-darker: #cb0026;
	--color-status-alert-lighter: #ffebf0;
	--color-status-success-default: #8adb39;
	--color-status-success-darker: #197e00;
	--color-status-success-lighter: #f2fbe9;
	--color-status-warning-default: #fb9613;
	--color-status-warning-darker: #e0520d;
	--color-status-warning-lighter: #fff3e0;
	--color-body-text: var(--color-primary-7);
	--color-disabled: var(--color-secondary-70);
	--color-link-text: var(--color-data-5-darker);
	--color-link-text-hover: var(--color-data-5-darker);
	--color-link-text-active: var(--color-data-5-darker);

	/* SIZES */
	--size-xxs: 2px;
	--size-xs: 4px;
	--size-s: 8px;
	--size-m: 16px;
	--size-l: 24px;
	--size-xl: 32px;
	--size-xxl: 40px;
	--size-xxxl: 48px;
	--size-xxxxl: 64px;

	/* SPACING */
	--spacing-supersquished-inside-s: var(--size-s) var(--size-l) var(--size-s)
		var(--size-l);
	--spacing-squished-inside-xs: var(--size-xs) var(--size-s) var(--size-xs)
		var(--size-s);
	--spacing-squished-inside-s: var(--size-s) var(--size-m) var(--size-s)
		var(--size-m);
	--spacing-squished-inside-m: var(--size-m) var(--size-l) var(--size-m)
		var(--size-l);
	--spacing-squished-inside-l: var(--size-l) var(--size-xxl) var(--size-l)
		var(--size-xxl);
	--spacing-squished-inside-xl: var(--size-xl) var(--size-xxxl) var(--size-xl)
		var(--size-xxxl);
	--spacing-squished-inside-xxl: var(--size-xxl) var(--size-xxxxl) var(--size-xxl)
		var(--size-xxxxl);
	--spacing-stretched-inside-xs: var(--size-s) var(--size-xs) var(--size-s)
		var(--size-xs);
	--spacing-stretched-inside-s: var(--size-m) var(--size-s) var(--size-m)
		var(--size-s);
	--spacing-stretched-inside-m: var(--size-l) var(--size-m) var(--size-l)
		var(--size-m);
	--spacing-stretched-inside-l: var(--size-xxl) var(--size-l) var(--size-xxl)
		var(--size-l);
	--spacing-stretched-inside-xl: var(--size-xxxl) var(--size-xl)
		var(--size-xxxl) var(--size-xl);
	--spacing-stretched-inside-xxl: var(--size-xxxxl) var(--size-xxl) var(--size-xxxxl)
		var(--size-xxl);

	/* TYPOGRAPHYY */
	--base-font-size: 16px;
	--font-size-xs: 0.75rem;
	--font-size-s: 0.875rem;
	--font-size-m: 1rem;
	--font-size-l: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-xxl: 1.5rem;
	--font-size-h1: 2.25rem;
	--font-size-h2: 1.75rem;
	--font-size-h3: 1.5rem;
	--font-size-h4: 1.25rem;
	--font-size-h5: 1.125rem;
	--font-size-h6: 1rem;
	--line-height-xs: 1;
	--line-height-s: 1.25;
	--line-height-m: 1.5;
	--line-height-l: 1.75;
}