/**
 * Base Variables
 */

/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
	
	/* Colours */

	--black: #000;
	--white: #FFF;

	--blue-100: #EDFAFF;
	--blue-200: #0FABD4;
	--blue-300: #3178A6;
	--blue-400: #095E95;

	--orange: #FFB400;
	
	--green: #BBE184;

	--grey-100: #F3F3F3;
	--grey-200: #EAEAEA;
	--grey-300: #333333;
	--grey-400: #070707;

	/* Font Sizing */

	--fs-64: clamp(2.125rem, 1.4813rem + 2.7985vw, 4rem);
	--fs-44: clamp(1.875rem, 1.5746rem + 1.306vw, 2.75rem);

	--fs-34: clamp(1.5rem, 1.2854rem + 0.9328vw, 2.125rem);
	--fs-24: clamp(0.875rem, 0.6604rem + 0.9328vw, 1.5rem);
	--fs-22: clamp(0.875rem, 0.7034rem + 0.7463vw, 1.375rem);
	--fs-18: clamp(0.875rem, 0.7892rem + 0.3731vw, 1.125rem);
	--fs-16: 1rem;
	--fs-15: 0.9375rem;
	--fs-14: 0.875rem;
	--fs-13: 0.8125rem;
	--fs-12: 0.75rem;

	/* Line Height */

	--lh-70: clamp(2.125rem, 1.3526rem + 3.3582vw, 4.375rem);
	--lh-52: clamp(1.875rem, 1.403rem + 2.0522vw, 3.25rem);
	--lh-52: clamp(1.875rem, 1.403rem + 2.0522vw, 3.25rem);
	--lh-42: clamp(2.125rem, 1.9534rem + 0.7463vw, 2.625rem);
	--lh-29: clamp(1.0625rem, 0.805rem + 1.1194vw, 1.8125rem);
	--lh-26: clamp(1.0625rem, 0.8694rem + 0.8396vw, 1.625rem);
	--lh-22: clamp(1.0625rem, 0.9552rem + 0.4664vw, 1.375rem);
	--lh-20: 1.25rem;
	--lh-19: 19px;
	--lh-17: 17px;

	/* Font Weight */

	--light: 300;
	--regular: 400;
	--medium: 500;
	--semibold: 600;
	--bold: 700;

}

/* Helpers */

.black {
	color: var(--black);
}

.white {
	color: var(--white);
}

.blue--100 {
	color: var(--blue-100);
}

.blue--200 {
	color: var(--blue-200);
}

.blue--300 {
	color: var(--blue-300);
}

.blue--400 {
	color: var(--blue-400);
}

.orange {
	color: var(--orange);
}

.green {
	color: var(--green);
}

.grey--100 {
	color: var(--grey-100);
}

.grey--200 {
	color: var(--grey-200);
}

.grey--300 {
	color: var(--grey-300);
}

.grey--400 {
	color: var(--grey-400);
}

.bg--black {
	background-color: var(--black);
}

.bg--white {
	background-color: var(--white);
}

.bg--blue-100 {
	background-color: var(--blue-100);
}

.bg--blue-200 {
	background-color: var(--blue-200);
}

.bg--blue-300 {
	background-color: var(--blue-300);
}

.bg--blue-400 {
	background-color: var(--blue-400);
}

.bg--orange {
	background-color: var(--orange);
}

.bg--green {
	background-color: var(--green);
}

.bg--grey-100 {
	background-color: var(--grey-100);
}

.bg--grey-200 {
	background-color: var(--grey-200);
}

.bg--grey-300 {
	background-color: var(--grey-300);
}

.bg--grey-400 {
	background-color: var(--grey-400);
}


/* Font Size Helpers */

.fs--64 {
    font-size: var(--fs-64);
}

.fs--44 {
    font-size: var(--fs-44);
}

.fs--34 {
    font-size: var(--fs-34);
}

.fs--24 {
    font-size: var(--fs-24);
}

.fs--22 {
    font-size: var(--fs-22);
}

.fs--18 {
    font-size: var(--fs-18);
}

.fs--16 {
    font-size: var(--fs-16);
}

.fs--15 {
    font-size: var(--fs-15);
}

.fs--14 {
    font-size: var(--fs-14);
}

.fs--13 {
    font-size: var(--fs-13);
}

.fs--12 {
    font-size: var(--fs-12);
}

/* Line Height Helpers */

.lh--70 {
    line-height: var(--lh-70);
}

.lh--42 {
    line-height: var(--lh-42);
}

.lh--29 {
    line-height: var(--lh-29);
}

.lh--26 {
    line-height: var(--lh-26);
}

.lh--22 {
    line-height: var(--lh-22);
}

.lh--20 {
    line-height: var(--lh-20);
}

.lh--19 {
    line-height: var(--lh-19);
}

.lh--17 {
    line-height: var(--lh-17);
}

/* Font Weight Helpers */

.fw--light {
	font-weight: var(--light);
}

.fw--regular {
	font-weight: var(--regular);
}

.fw--medium {
	font-weight: var(--medium);
}

.fw--semibold {
	font-weight: var(--semibold);
}

.fw--bold {
	font-weight: var(--bold);
}

/* Text Styling */

.uppercase {
	text-transform: uppercase;
}

.align--center {
	text-align: center;
}

.ls---2 {
	letter-spacing: -2px;
}

.ls---1 {
	letter-spacing: -1px;
}

.ls--1 {
	letter-spacing: 1px;
}

.ls--2 {
	letter-spacing: 2px;
}

.ls--3 {
	letter-spacing: 3px;
}

.ls--4 {
	letter-spacing: 4px;
}


/* Spacing */

.m--0 {
	margin: 0;
}

.mt--0 {
	margin-top: 0;
}

.mb--0 {
	margin-bottom: 0;
}

.m--auto {
	margin: auto;
}

/* Structure Helpers */

.flex-split {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
}

.flex-split .flex-col {
	flex: 1 1 clamp(calc(20rem - 2.5rem), calc(50% - 2.5rem), 100%);
}