/* Variables
--------------------------------------------------------- */
:root {
/* fonts */
	--ff-default: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--ff-alt: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* colors */
	--c-white: #FFFFFF;
	--c-white-fixed: #FFFFFF;
	--c-white-alt: color-mix(in srgb, var(--c-white) 90%, black);
	--c-dark-fixed: #2D2D2D;
	--c-lighten-bg-95: color-mix(in srgb, var(--c-bg) 95%, white);
	--c-lighten-bg-90: color-mix(in srgb, var(--c-bg) 90%, white);
	
	--c-primary: #00D1CA;
	--c-primary-alt:color-mix(in srgb, var(--c-primary) 90%, black);
	--c-primary-90: color-mix(in srgb, var(--c-primary) 90%, white);
	--c-primary-80: color-mix(in srgb, var(--c-primary) 80%, white);
	--c-primary-70: color-mix(in srgb, var(--c-primary) 70%, white);
	--c-primary-60: color-mix(in srgb, var(--c-primary) 60%, white);
	--c-primary-50: color-mix(in srgb, var(--c-primary) 50%, white);
	--c-primary-40: color-mix(in srgb, var(--c-primary) 40%, white);
	--c-primary-30: color-mix(in srgb, var(--c-primary) 30%, white);
	--c-primary-20: color-mix(in srgb, var(--c-primary) 20%, white);
	--c-primary-10: color-mix(in srgb, var(--c-primary) 10%, white);

	--c-secondary: #2D2D2D;
	--c-secondary-alt: color-mix(in srgb, var(--c-secondary) 90%, white);
	
	--c-danger: #FF5449;
	--c-danger-alt: color-mix(in srgb, var(--c-danger) 90%, white);
	
	--c-warning: #FFCC16;
	--c-warning-alt: color-mix(in srgb, var(--c-warning) 90%, white);
	
	--c-success: #00C44E;
	--c-success-alt: color-mix(in srgb, var(--c-success) 90%, white);
	
	--c-text: #2D2D2D;
	--c-headlines: #2D2D2D;
	--c-gray: color-mix(in srgb, var(--c-text) 70%, white);
	
	--c-light-gray: color-mix(in srgb, var(--c-bg-invert) 70%, white);
	--c-lightest-gray: #EDEDED;
	--c-nosun-light: #EDEDED;
	--c-bg: #EDEDED;
	--c-bg-invert: #2D2D2D;
	--c-bg-95:rgb(from var(--c-bg) r g b / 95%);
	--c-bg-90:rgb(from var(--c-bg) r g b / 90%);
	--c-bg-85:rgb(from var(--c-bg) r g b / 85%);
	--c-bg-80:rgb(from var(--c-bg) r g b / 80%);
	--c-bg-75:rgb(from var(--c-bg) r g b / 75%);
	--c-bg-70:rgb(from var(--c-bg) r g b / 70%);
	--c-bg-65:rgb(from var(--c-bg) r g b / 65%);
	--c-bg-60:rgb(from var(--c-bg) r g b / 60%);
	--c-bg-55:rgb(from var(--c-bg) r g b / 55%);
	--c-bg-50:rgb(from var(--c-bg) r g b / 50%);
	--c-bg-45:rgb(from var(--c-bg) r g b / 45%);
	--c-bg-40:rgb(from var(--c-bg) r g b / 40%);
	--c-bg-35:rgb(from var(--c-bg) r g b / 35%);
	--c-bg-34:rgb(from var(--c-bg) r g b / 34%);
	--c-bg-30:rgb(from var(--c-bg) r g b / 30%);
	--c-bg-25:rgb(from var(--c-bg) r g b / 25%);
	--c-bg-20:rgb(from var(--c-bg) r g b / 20%);
	--c-bg-15:rgb(from var(--c-bg) r g b / 15%);
	--c-bg-14:rgb(from var(--c-bg) r g b / 14%);
	--c-bg-10:rgb(from var(--c-bg) r g b / 10%);
	--c-bg-5: rgb(from var(--c-bg) r g b / 5%);
	--c-bg-0: rgb(from var(--c-bg) r g b / 0%);
	--c-bg-invert-95:rgb(from var(--c-bg-invert) r g b / 95%);
	--c-bg-invert-90:rgb(from var(--c-bg-invert) r g b / 90%);
	--c-bg-invert-85:rgb(from var(--c-bg-invert) r g b / 85%);
	--c-bg-invert-80:rgb(from var(--c-bg-invert) r g b / 80%);
	--c-bg-invert-75:rgb(from var(--c-bg-invert) r g b / 75%);
	--c-bg-invert-70:rgb(from var(--c-bg-invert) r g b / 70%);
	--c-bg-invert-65:rgb(from var(--c-bg-invert) r g b / 65%);
	--c-bg-invert-60:rgb(from var(--c-bg-invert) r g b / 60%);
	--c-bg-invert-55:rgb(from var(--c-bg-invert) r g b / 55%);
	--c-bg-invert-50:rgb(from var(--c-bg-invert) r g b / 50%);
	--c-bg-invert-45:rgb(from var(--c-bg-invert) r g b / 45%);
	--c-bg-invert-40:rgb(from var(--c-bg-invert) r g b / 40%);
	--c-bg-invert-35:rgb(from var(--c-bg-invert) r g b / 35%);
	--c-bg-invert-34:rgb(from var(--c-bg-invert) r g b / 34%);
	--c-bg-invert-30:rgb(from var(--c-bg-invert) r g b / 30%);
	--c-bg-invert-25:rgb(from var(--c-bg-invert) r g b / 25%);
	--c-bg-invert-20:rgb(from var(--c-bg-invert) r g b / 20%);
	--c-bg-invert-15:rgb(from var(--c-bg-invert) r g b / 15%);
	--c-bg-invert-14:rgb(from var(--c-bg-invert) r g b / 14%);
	--c-bg-invert-10:rgb(from var(--c-bg-invert) r g b / 10%);
	--c-bg-invert-5: rgb(from var(--c-bg-invert) r g b / 5%);
	--c-bg-invert-0: rgb(from var(--c-bg-invert) r g b / 0%);

/* container widths and gaps / margins / paddings */
	--gap-default:24px;
	--gap-half:12px;
	--container-width:1488px;
	--container-width-s:1280px;
	--container-width-xs:1080px;
	--container-width-xxs:767px;
	
	--container-outer-width: calc(var(--container-width) + (var(--gap-default) * 2));
	--screen-sides: calc(100vw - var(--container-outer-width));
	--screen-side: calc(var(--screen-sides) / 2);
	--scrollbar-width: 10px;
	--scrollbar-width-half: calc(var(--scrollbar-width) / 2);
	
	--space-xxl: clamp(20rem, 4.595rem + 20.300vw, 32rem);
	--space-m: clamp(10rem, 4.865rem + 6.800vw, 15rem);
	--space-s: clamp(3.5rem, -0.095rem + 4.700vw, 7rem);
	--space-xs: clamp(2rem, -1.081rem + 4.100vw, 5rem);

/* font-sizes */
	--fs-huge: clamp(5rem, 2.379rem + 3.400vw, 9rem);
	--fs-l: clamp(2.2rem, 1.807rem + 0.500vw, 2.8rem);
	--fs-m: clamp(1.6rem, 1.338rem + 0.300vw, 2rem);
	--fs-s: clamp(1.1rem, 0.903rem + 0.300vw, 1.4rem);

/* letters-spacing */
	--ls-l: 0.20rem;
	--ls-m: 0.10rem;
	--ls-s: 0.05rem;
	
/* line-height */
	--lh-l: 1.6;
	--lh-m: 1.4;
	--lh-s: 1.2;

/* animations */
	--a-distance: 40px;
	--a-easing-default: ease-out;
	--a-timing-default: 0.3s;
	--a-easing-slow: ease-in-out;
	--a-timing-slow: 0.6s;
	--transition: all var(--a-timing-default) var(--a-easing-default);
	--transition-slow: all var(--a-timing-slow) var(--a-easing-slow);
	--transition-1: all 300ms cubic-bezier(0.45, 1.45, 0.8, 1);
	--transition-1-timing: 300ms;
	--transition-1-easing: cubic-bezier(0.45, 1.45, 0.8, 1);
	--transition-2-easing: cubic-bezier(0.45, 2.45, 0.8, 1);
	--transition-2-timing: 600ms;
	--transition: all 300ms cubic-bezier(0.45, 1.45, 0.8, 1);

/* miscellaneous */
	--border-radius: 40px;
	--box-shadow-default: 0 0 10px var(--c-bg-invert-14);
	--box-shadow-large: 0 5px 30px var(--c-bg-invert-34);
	
	--header-height: 92px;
}

@media (max-width: 1080px) {
	:root {
		--header-height: 92px;
	}
}
@media (max-width: 767px) {
	:root {
		--header-height: 92px;
	}
}

/* accessibility */
html.high-contrast {
	--c-primary: #000;
}
html.high-contrast #theme-toggle {
	display: none !important;
}