:root {
		/* Spacing */
		--spacing-px: 1px;
		--spacing-0: 0px;
		--spacing-0_5: 0.125rem;
		--spacing-1: 0.25rem;
		--spacing-1_5: 0.375rem;
		--spacing-2: 0.5rem;
		--spacing-2_5: 0.625rem;
		--spacing-3: 0.75rem;
		--spacing-3_5: 0.875rem;
		--spacing-4: 1rem;
		--spacing-5: 1.25rem;
		--spacing-6: 1.5rem;
		--spacing-7: 1.75rem;
		--spacing-8: 2rem;
		--spacing-9: 2.25rem;
		--spacing-10: 2.5rem;
		--spacing-11: 2.75rem;
		--spacing-12: 3rem;
		--spacing-14: 3.5rem;
		--spacing-16: 4rem;
		--spacing-20: 5rem;
		--spacing-24: 6rem;
		--spacing-28: 7rem;
		--spacing-32: 8rem;
		--spacing-36: 9rem;
		--spacing-40: 10rem;
		--spacing-44: 11rem;
		--spacing-48: 12rem;
		--spacing-52: 13rem;
		--spacing-56: 14rem;
		--spacing-60: 15rem;
		--spacing-64: 16rem;
		--spacing-72: 18rem;
		--spacing-80: 20rem;
		--spacing-96: 24rem;

		/* Rounding */
		--rounding-large: 6px;
		--rounding-small: 2px;

		/* Brand Colors */
		--brand-01: #000000FF;
		--brand-02: #B99840FF;
		--brand-03: #CAA748FF;
		--brand-04: #F1EEE8FF;
		--brand-05: #FFFFFFFF;
		--brand-06: #FAF8F4FF;
		--brand-07: #FF1400FF;

		/* Text Colors */
		--text-primary: var(--brand-01);
		--text-secondary: var(--brand-05);
		--text-active: var(--brand-02);
		--text-link: var(--brand-05);
		--text-link-hover: var(--brand-06);
		--text-icon-primary: white;
		--text-icon-hover: white;
		--text-icon-secondary: var(--brand-05);
		--text-error: var(--brand-07);

		/* Background Colors
	   These values may be gradients. If you want to support gradients,
	   make sure you use 'background' and not 'background-color' when you reference these variables */
		--background-root: var(--brand-04);
		--background-primary: var(--brand-05);
		--background-secondary: var(--brand-02);
		--background-highlight: var(--brand-04);
		--background-input: var(--brand-06);
		--background-button: var(--brand-02);
		--background-button-hover: var(--brand-03);

		/* Border Colors */
		--border-input: var(--brand-04);
		--border-error: var(--brand-07);
		--border-hover: var(--brand-02);
		--border-active: var(--brand-02);
		--border-focus: var(--var(--border-focus-color));

		/* Input Styles */
		--input-border: var(--brand-04);
		--input-border-error: var(--brand-07);
		--input-border-hover: var(--brand-02);
		--input-border-active: var(--brand-02);
		--input-label: var(--brand-01);
		--input-label-error: var(--brand-07);
		--input-label-active: var(--brand-02);
		--input-background: var(--brand-06);
		--input-placeholder: var(--brand-05);
		--input-rounding: 2px;
		--input-icon: var(--brand-01);

		/* Countdown Styles */
		--countdown-panel-background: var(--brand-04);
		--countdown-label-text: var(--brand-02);
		--countdown-value-text: var(--brand-01);

		/* Layout styles
	   Box shadow css value format including spread radius: '<offset-x> <offset-y> <blur-radius> <spread-radius> <color>' */
		--layout-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.12);

		/* Button Styles */
		--button-rounding: 2px;

		/* Checkbox Styles */
		--checkbox-rounding: 2px;

		--border-focus-color: color-mix(in srgb, undefined 40%, transparent)
	}


	/* TYPOGRAPHY UTILITY CLASSES! */
	.font-heading-desktop {
		
		font-family: "Titillium Web", sans-serif;
		font-weight: 700;
		font-size: 36px;
		line-height: 1.1666666666666667;
		text-transform: uppercase;
	
	}

	.font-heading-mobile {
		
		font-family: "Titillium Web", sans-serif;
		font-weight: 700;
		font-size: 26px;
		line-height: 1.0769230769230769;
		text-transform: uppercase;
	
	}

	.font-large-body-bold {
		
		font-family: "Titillium Web", sans-serif;
		font-weight: 700;
		font-size: 16px;
		line-height: 1.5;
		text-transform: none;
	
	}

	.font-large-body {
		
		font-family: "Titillium Web", sans-serif;
		font-weight: 400;
		font-size: 16px;
		line-height: 1.5;
		text-transform: none;
	
	}

	.font-small-body {
		
		font-family: "Titillium Web", sans-serif;
		font-weight: 400;
		font-size: 12px;
		line-height: 1.5;
		text-transform: none;
	
	}

	.font-navigation-large {
		
		font-family: "Titillium Web", sans-serif;
		font-weight: 700;
		font-size: 22px;
		line-height: 1.0909090909090908;
		text-transform: none;
	
	}

	.font-navigation-small {
		
		font-family: "Titillium Web", sans-serif;
		font-weight: 700;
		font-size: 16px;
		line-height: 1;
		text-transform: uppercase;
	
	}

	.font-button {
		
		font-family: "Titillium Web", sans-serif;
		font-weight: 700;
		font-size: 20px;
		line-height: 1.5;
		text-transform: uppercase;
	
	}

	.font-feature-label {
		
		font-family: "Titillium Web", sans-serif;
		font-weight: 400;
		font-size: 12px;
		line-height: 1;
		text-transform: uppercase;
	
	}