:root {

	/* =====================================================
	   FONTS
	   ================================================== */

		--font-fallback: "Arial", "Segoe UI", "Helvetica", "Helvetica Neue", sans-serif;
		--font-primary: "Arial Black", var(--font-fallback);
		--font-secondary: "Helvetica", var(--font-fallback);


	/* =====================================================
	   FONT SIZES
	   ================================================== */

		--fs-900: clamp(1.75rem, 4.2vw, 3.25rem);
		--fs-800: clamp(1.75rem, 3.4vw, 3rem);
		--fs-700: clamp(1.75rem, 2.9vw, 2.125rem);
		--fs-600: clamp(1.375rem, 2.4vw, 1.75rem);
		--fs-500: clamp(1.25rem, 2.1vw, 1.5rem);
		--fs-400: clamp(1.125rem, 1.7vw, 1.25rem);
		--fs-300: clamp(1rem, 1.6vw, 1.375rem);
		--fs-200: clamp(1rem, 1.3vw, 1.125rem);
		--fs-100: clamp(0.75rem, 1.1vw, 0.875rem);


	/* =====================================================
	   SEMANTIC TEXT SIZES
	   ================================================== */

		--heading-xxl: var(--fs-900);
		--heading-xl: var(--fs-800);
		--heading-lg: var(--fs-700);
		--heading-md: var(--fs-600);
		--heading-sm: var(--fs-500);
		--heading-xs: var(--fs-400);

		--text-lg: var(--fs-300);
		--text-md: var(--fs-200);
		--text-sm: var(--fs-100);


	/* =====================================================
	   LINE HEIGHTS
	   ================================================== */

		--lh-heading: 1.5;
		--lh-text-lg: 2;
		--lh-text-md: 1.5;


	/* =====================================================
	   FONT WEIGHTS
	   ================================================== */

		--fw-bold: 700;
		--fw-regular: 400;
		--fw-light: 300;


	/* =====================================================
	   MAIN COLOURS
	   ================================================== */

		--color-blue-900: #24344D;
		--color-blue-700: #018DF4;
		--color-blue-500: #01B1F4;
		--color-blue-300: #65D4FF;
		--color-blue-100: #CCEFFD;

		--color-blue-rgb: 1, 176, 244;

		--color-yellow-900: #4D3100;
		--color-yellow-700: #DD9A23;
		--color-yellow-500: #FAB73F;
		--color-yellow-300: #FFD891;
		--color-yellow-100: #F7F0E3;

		--color-yellow-rgb: 250, 183, 63;


	/* =====================================================
	   NEUTRAL COLOURS
	   ================================================== */

		--color-grey-900: #212121;
		--color-grey-800: #333333;
		--color-grey-700: #505050;
		--color-grey-600: #7F7F7F;
		--color-grey-500: #969696;
		--color-grey-400: #BFBFBF;
		--color-grey-300: #D8D8D8;
		--color-grey-200: #F2F2F2;
		--color-grey-100: #F8F8F8;

		--color-black: #000000;
		--color-white: #FFFFFF;

		--color-black-rgb: 0, 0, 0;
		--color-white-rgb: 255, 255, 255;


	/* =====================================================
	   SEMANTIC COLOURS
	   ================================================== */

		--color-bg: var(--color-white);
		--color-bg-inverse: var(--color-black);

		--color-surface: var(--color-grey-100);
		--color-surface-raised: var(--color-white);
		--color-surface-raised-alpha-80: rgba(var(--color-white-rgb), 80%);

		--color-heading: var(--color-black);
		--color-heading-secondary: var(--color-black);

		--color-subheading: var(--color-primary);
		--color-subheading-secondary: var(--color-primary);

		--color-text: var(--color-grey-900);
		--color-text-inverse: var(--color-white);

		--color-border: var(--color-grey-500);
		--color-border-light: var(--color-grey-300);
		--color-border-strong: var(--color-grey-800);		
		--color-border-inverse: var(--color-white);
		--color-border-inverse-alpha-20: rgba(var(--color-white-rgb), 20%);

		--color-primary: var(--color-blue-500);
		--color-primary-hover: var(--color-blue-700);
		--color-primary-focus: var(--color-blue-900);
		--color-primary-soft: var(--color-blue-100);
		--color-primary-rgb: var(--color-blue-rgb);

		--color-secondary: var(--color-yellow-500);
		--color-secondary-hover: var(--color-yellow-700);
		--color-secondary-focus: var(--color-yellow-900);
		--color-secondary-soft: var(--color-yellow-100);
		--color-secondary-rgb: var(--color-yellow-rgb);

		--color-ui-muted: rgba(var(--color-black-rgb), 15%);

		--color-overlay: var(--color-black-rgb);

		--color-shadow: rgba(var(--color-black-rgb), 10%);


	/* =====================================================
	   SEMANTIC GRADIENTS
	   ================================================== */

		--gradient-primary: linear-gradient(90deg, var(--color-blue-500) 0%, var(--color-blue-700) 100% );
		--gradient-secondary: linear-gradient(90deg, var(--color-yellow-500) 0%, var(--color-yellow-700) 100% );


	/* =====================================================
	   SOCIAL MEDIA COLOURS
	   ================================================== */

		--color-bluesky: #1185fe;
		--color-facebook: #086efb;
		--color-instagram: #d93175;
		--color-linkedin: #0077b5;
		--color-tiktok: #ff0050;
		--color-vimeo: #17d5ff;
		--color-x-twitter: #000000;
		--color-youtube: #ff0000;


	/* =====================================================
	   SOCIAL MEDIA GRADIENTS
	   ================================================== */

		--gradient-instagram: radial-gradient(circle at 20% 125%, #fdf497 0%, #fdf497 5%, #fd5949 40%, #d6249f 60%, #285AEB 90%);
		--gradient-tiktok: linear-gradient(225deg, #ff0050, #00f2ea 100%);


	/* =====================================================
	   LAYOUT
	   ================================================== */

		--container-max-width: 87.5rem;
		--gap: clamp(1.25rem, 3vw, 1.875rem);


	/* =====================================================
	   RADIUS
	   ================================================== */

		--radius-full: 9999px;
		--radius-base: 0.25rem;
		--radius-scale-default: 0;


	/* =====================================================
	   MOTION / TRANSITIONS
	   ================================================== */

		--transition-longer: 2000ms;
		--transition-long: 1200ms;
		--transition: 800ms;
		--transition-short: 400ms;


	/* =====================================================
	   MISCELLANEOUS
	   ================================================== */

		--blur: blur(45px);

}