:root {
	--brand-red: #D9031C;
	--brand-red-hover: #BF0319;

	--color-neutral-100: #EDEDED;
	--color-neutral-500: #666;
	--color-002: #FFFFFF33;
	--color-0002: #FFFFFF05;
	--color-0005: #FFFFFF80;
	--neutral-50: #F7F7F8;
	--neutral-200: #D2D2D2;
	--neutral-300: #B2B2B2;
	--neutral-500: #666666;
	--neutral-700: #3F3F3F;
	--neutral-900: #171717;

	--solomon: 'Solomon Sans', 'Segoe UI', sans-serif;

	--font-base: 17px;
	--line-height-loose: 1.3;
	--line-height-medium: 1.2;
	--line-height-tight: 1;

	--text-display: 67px;
	--text-heading_l: 57px;
	--text-heading_m: 41px;
	--text-heading_s: 31px;
	--text-heading_xs: 21px;
	--text-body: 17px;
	--text-caption: 15px;

	--space-8: 8px;
	--space-12: 12px;
	--space-s: 32px;

	--mb: 128px;

	--clip-path-badge: polygon(0 0, calc(100% - var(--space-8)) 0, 100% var(--space-8), 100% 100%, var(--space-8) 100%, 0 calc(100% - var(--space-8)));
	--clip-path-ui: polygon(0 0, calc(100% - var(--space-12)) 0, 100% var(--space-12), 100% 100%, var(--space-12) 100%, 0 calc(100% - var(--space-12)));
	--clip-path-surface: polygon(0 0, calc(100% - var(--space-s)) 0, 100% var(--space-s), 100% 100%, var(--space-s) 100%, 0 calc(100% - var(--space-s)));

	--transition-ui-delay:.2s;
	--transition-ui-easing: ease-out;
	--transition-surface-delay: .4s;

	--border: 1px solid var(--color-002);
	--border-dark: 1px solid var(--color-neutral-100);
}