:root {
	/*  Font Family  */
	--font-body: 'Aestetico W00 Regular', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-display: var(--font-body);
	--font-contrast: 'malaga', Georgia, serif;

	/*  Widths  */
	--width-compact: calc(var(--width-comfortable) * (2/3));
	--width-comfortable: 72ch;
	--width-double: calc(var(--width-comfortable) * 2);
	--width-base: 1200px;
	--width-feature: 1440px;
	--width-fullscreen: 100vw;

	/*  Space  */
	--space-px: 1px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 24px;
	--space-8: 28px;
	--space-9: 36px;
	--space-10: 40px;
	--space-12: 48px;
	--space-14: 56px;
	--space-15: 60px;
	--space-16: 64px;
	--space-18: 72px;
	--space-20: 80px;
	--space-22: 88px;
	--space-24: 96px;
	--space-28: 112px;
	--space-32: 128px;
	--space-40: 160px;
	--space-48: 192px;
	--space-56: 224px;
	--space-64: 256px;

	/*  Containers  */
	--container-single: calc(var(--width-comfortable) + var(--space-10));
	--container-double: calc(var(--width-double) + var(--space-24));

	/*  Font Size  */
	--text-xxs: 0.6875rem; /* 11px */
	--text-xs: 0.875rem; /* 14px */
	--text-smish: 0.9375rem; /* 15px */
	--text-sm: 1rem; /* 16px */
	--text-base: 1.125rem; /* 18px */
	--text-lg: 1.375rem; /* 22px */
	--text-xl: 1.5rem; /* 24px */
	--text-2xl: 1.625rem; /* 26px */
	--text-3xl: 1.875rem; /* 30px */
	--text-4xl: 2rem; /* 32px */
	--text-5xl: 2.25rem; /* 36px */
	--text-6xl: 3.75rem; /* 60px */
	--text-7xl: 4.5rem; /* 72px */
	--text-8xl: 4.75rem; /* 76px */

	/*  Letter Spacing  */
	--tracking-tighter: -0.05em;
	--tracking-tight: -0.025em;
	--tracking-normal: 0em;
	--tracking-wide: 0.025em;
	--tracking-wider: 0.05em;
	--tracking-widest: 0.1em;

	/*  Line Height  */
	--leading-none: 1;
	--leading-x-tight: 1.1;
	--leading-tight: 1.2;
	--leading-snug: 1.3;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;
	--leading-loose: 2;

	/*  Colors  */
	--black: #000; /* unused */
	--white: #fff;

	--gray-hue: 222; /* UNUSED - except in custom_head.html for critical styles */
	--gray-rgb: 50, 54, 63;
	--gray-100: rgb(255, 251, 240); /* in page nav bg, use with .93 opacity */
	--gray-200: rgb(239, 238, 235); /* accordion toggle bg */
	--gray-300: rgb(231, 229, 225); /* side by side one across cta bg */
	--gray-400: rgb(224, 222, 213); /* preview slider item border */
	--gray-500: rgb(207, 204, 196); /* breadcrumb separator */
	--gray-600: rgb(93, 87, 80); /* #5d5750 - breadcrumbs, in page nav, sub-title/small text in title, slide separator dots, misc. */
	--gray-700: rgb(50, 54, 63); /* unused - same as 900 */
	--gray-800: rgb(50, 54, 63); /* unused - same as 900 */
	--gray-900: rgb(var(--gray-rgb)); /* primary text, misc background elements */

	/* note: primary color only varies in alpha channel */
	--primary-color-hue: 195; /* #1a92ba, rgb(26, 146, 186) */
	--primary-color-rgb: 26, 146, 186; /* this can be used to create rgba variants of the primary color */
	--primary-color-100: #fff; /* setting these lower values to white for contrast */
	--primary-color-200: #fff; /* these can be removed, but they make base client things look less broken */
	--primary-color-300: #fff; /* but yeah, don't use 100-800. there's nothing like this in the design */
	--primary-color-400: #fff; /* that's all. */
	--primary-color-500: rgb(26, 146, 186); /* s */
	--primary-color-600: rgb(26, 146, 186); /* a */
	--primary-color-700: rgb(26, 146, 186); /* m */
	--primary-color-800: rgb(26, 146, 186); /* e */
	--primary-color-900: rgb(26, 146, 186); /* <- use this one */

	--secondary-color-hue: 29; /* unused */
	--secondary-color-100: hsl(var(--secondary-color-hue), 100%, 97%);
	--secondary-color-200: hsl(var(--secondary-color-hue), 96%, 89%);
	--secondary-color-300: hsl(var(--secondary-color-hue), 93%, 77%);
	--secondary-color-400: hsl(var(--secondary-color-hue), 90%, 65%);
	--secondary-color-500: hsl(var(--secondary-color-hue), 84%, 57%);
	--secondary-color-600: hsl(var(--secondary-color-hue), 75%, 50%);
	--secondary-color-700: hsl(var(--secondary-color-hue), 71%, 44%);
	--secondary-color-800: hsl(var(--secondary-color-hue), 65%, 37%);
	--secondary-color-900: hsl(var(--secondary-color-hue), 61%, 30%);

	--tertiary-color-hue: 0; /* unused */
	--tertiary-color-100: hsl(var(--tertiary-color-hue), 93%, 94%);
	--tertiary-color-200: hsl(var(--tertiary-color-hue), 96%, 89%);
	--tertiary-color-300: hsl(var(--tertiary-color-hue), 94%, 82%);
	--tertiary-color-400: hsl(var(--tertiary-color-hue), 91%, 71%);
	--tertiary-color-500: hsl(var(--tertiary-color-hue), 84%, 60%);
	--tertiary-color-600: hsl(var(--tertiary-color-hue), 72%, 51%);
	--tertiary-color-700: hsl(var(--tertiary-color-hue), 74%, 42%);
	--tertiary-color-800: hsl(var(--tertiary-color-hue), 70%, 35%);
	--tertiary-color-900: hsl(var(--tertiary-color-hue), 63%, 31%);

	/*  Shadows  */
	--shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);
	--shadow-sm: 0 1px 2px 0 rgba(255, 242, 242, 0.05);
	--shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.15); /* from PSD */
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
	--shadow-outline: 0 0 0 3px rgba(66, 153, 225, 0.5);

	/* Border Radii */
	--rounded-none: 0px;
	--rounded: 0.125rem;
	--rounded-md: 0.375rem;
	--rounded-lg: 0.5rem;
	--rounded-xl: 0.75rem;
	--rounded-2xl: 1rem;
	--rounded-3xl: 1.5rem;
	--rounded-full: 9999px;
	--rounded-circle: 50%;
}