/**
 * 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 {
	/* Font Sizing */

	--fs--2: clamp(0.6944rem, 0.6856rem + 0.0444vw, 0.72rem);
	--fs--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem);
	--fs-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
	--fs-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);
	--fs-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem);
	--fs-3: clamp(1.728rem, 1.5648rem + 0.8161vw, 2.1973rem);
	--fs-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem);
	--fs-5: clamp(2.4883rem, 2.1597rem + 1.6433vw, 3.4332rem);

	/* Font Weight */

	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-extrabold: 800;
	--fw-black: 900;

	/* Spacing */

	/* Space 3xs: 4px → 5px */
	--space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
	/* Space 2xs: 8px → 9px */
	--space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
	/* Space xs: 12px → 14px */
	--space-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
	/* Space s: 16px → 18px */
	--space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
	/* Space m: 24px → 27px */
	--space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
	/* Space l: 32px → 36px */
	--space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
	/* Space xl: 48px → 54px */
	--space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);
	/* Space 2xl: 64px → 72px */
	--space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);
	/* Space 3xl: 96px → 108px */
	--space-3xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem);

	/* Colours */

	--pink: #e73e97;
	--darkpink: #a81563;
	--teal: #004F6B;
	
	--body: #00133F;
	
	--bg: #eff6ff;
	
	--line-grey: #e2e8f0;
	
	--white: #fff;

	--gradient-bg: linear-gradient(to right top, #eff6ff, #f4f8ff, #f9faff, #fcfcff, #ffffff);
	--gradient-bg-moz: -moz-linear-gradient(to right top, #eff6ff, #f4f8ff, #f9faff, #fcfcff, #ffffff);
	--gradient-bg-web: -webkit-linear-gradient(to right top, #eff6ff, #f4f8ff, #f9faff, #fcfcff, #ffffff);

	--gradient-pink: linear-gradient(135deg, hsla(328, 78%, 57%, 1) 0%, hsla(328, 78%, 45%, 1) 100%);
	--gradient-pink-moz: -moz-linear-gradient(135deg, hsla(328, 78%, 57%, 1) 0%, hsla(328, 78%, 45%, 1) 100%);
	--gradient-pink-web: -webkit-linear-gradient(135deg, hsla(328, 78%, 57%, 1) 0%, hsla(328, 78%, 45%, 1) 100%);

	--shadow: 0 1px 2px 0 rgb(0 0 0 / .05);

}

/* Helper Classes */

/* Fixes */

.reset {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

/* Fonts */

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

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

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

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

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

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

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

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

/* Font Weight */

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

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

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

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

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

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

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


/* Colours */

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

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

.teal {
	color: var(--teal);
}
	
.body {
	color: var(--body);
}
	
.bg {
	color: var(--bg);
}
	
.line-grey {
	color: var(--line-grey);
}
	
.white {
	color: var(--white);
}

/* Background Colours */

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

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

.bg--teal {
	background-color: var(--teal);
}
	
.bg--body {
	background-color: var(--body);
}
	
.bg--bg {
	background-color: var(--bg);
}
	
.bg--line-grey {
	background-color: var(--line-grey);
}
	
.bg--white {
	background-color: var(--white);
}

.shadow {
	box-shadow: var(--shadow)
}

.border {
	border: 1px solid var(--line-grey);
    border-radius: .5rem;
    padding: var(--space-m);
}


/* Align */

.center {
	text-align: center;
}

/* Spacing */

/* Padding Top */

.no-margin

.pt--3xl {
	padding-top: var(--space-3xl);
}

.pt--2xl {
	padding-top: var(--space-2xl);
}

.pt--xl {
	padding-top: var(--space-xl);
}

.pt--l {
	padding-top: var(--space-l);
}

.pt--m {
	padding-top: var(--space-m);
}

.pt--s {
	padding-top: var(--space-s);
}

.pt--xs {
	padding-top: var(--space-xs);
}

.pt--2xs {
	padding-top: var(--space-2xs);
}

.pt--3xs {
	padding-top: var(--space-3xs);
}

/* Padding Bottom */

.pb--3xl {
	padding-bottom: var(--space-3xl);
}

.pb--2xl {
	padding-bottom: var(--space-2xl);
}

.pb--xl {
	padding-bottom: var(--space-xl);
}

.pb--l {
	padding-bottom: var(--space-l);
}

.pb--m {
	padding-bottom: var(--space-m);
}

.pb--s {
	padding-bottom: var(--space-s);
}

.pb--xs {
	padding-bottom: var(--space-xs);
}

.pb--2xs {
	padding-bottom: var(--space-2xs);
}

.pb--3xs {
	padding-bottom: var(--space-3xs);
}

