@layer vendor, theme, atoms, molecules, organisms, structures, templates, pages, utility;
/* Global */
/* --nav is by default equal to --lg */
@font-face {
	font-family: CriteriaCF;
	src: url('/assets/fonts/CriteriaCF-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: DMSans;
	src: url('/assets/fonts/DMSans.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@layer theme.reset {
		@supports (interpolate-size: allow-keywords) {
	:root {
			interpolate-size: allow-keywords;
	}
		}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	/* Set smooth scroll behavior for e.g. anchor navigation */
	html,
	body {
		scroll-behavior: smooth;
	}

	/* Prevent font size inflation */
	html {
		-webkit-text-size-adjust: none;
		   -moz-text-size-adjust: none;
		        text-size-adjust: none;
	}

	/* Set body defaults */
	body {
		--page-theme: var(--s-page-theme);
		--page-theme-secondary: var(--s-page-theme-secondary);
		--page-theme-tertiary: var(--s-page-theme-tertiary);
		--page-theme-quaternary: var(--s-page-theme-quaternary);
		--page-theme-button: var(--s-page-theme-button);
		--page-theme-button-hover: var(--s-page-theme-button-hover);
		--page-theme-button-active: var(--s-page-theme-button-active);
		--pattern-theme: var(--s-pattern-theme);

		color: var(--s-body-color-default);
		font-family: var(--s-body-font-family-default);
		font-size: var(--s-body-font-size-default);
		font-weight: var(--s-body-font-weight-default);
		line-height: var(--s-body-line-height-default);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	/* Remove default margin in favour of better control in authored CSS */
	* {
		margin: 0;
		padding: 0;
	}

	/* Default display block for certain elements */
	img,
	svg,
	video,
	picture,
	figure,
	canvas,
	audio,
	iframe,
	embed,
	object {
		display: block;
	}

	/* Make images easier to work with */
	img,
	video,
	picture,
	figure,
	iframe {
		border: none;
		inline-size: auto;
		max-inline-size: 100%;
		block-size: auto;
	}

	/* Inherit fonts for inputs and buttons */
	button,
	input,
	select,
	optgroup,
	textarea,
	::file-selector-button {
		font: inherit;
		font-feature-settings: inherit;
		font-variation-settings: inherit;
		letter-spacing: inherit;
		color: inherit;
		border-radius: 0;
		background-color: transparent;
		opacity: 1;
	}

	/* Ensure the hidden-attribute overwrites other styles */
	[hidden]:where(:not([hidden='until-found'])) {
		display: none !important;
	}

	/* Set default outline styles for interactive elements */
	button,
	input,
	select,
	textarea,
	summary,
	a {
		outline: transparent;
		outline-color: var(--p-outline-color);
		outline-offset: var(--p-outline-offset);
	}

		:is(button,input,select,textarea,summary,a):focus-visible {
			outline-style: var(--p-outline-style);
			outline-width: var(--p-outline-width);
		}

	/* Prevent resizing textareas horizontally by default. */
	textarea {
		resize: vertical;
	}

	/* Set default link styles */
	a {
		-webkit-text-decoration: underline;
		text-decoration: underline;
		color: var(--link-color, var(--s-link-color-default));
		text-underline-offset: 0.125rem;
		transition:
			color var(--s-transition-duration-default) var(--s-transition-timing-function-default),
			text-decoration-color var(--s-transition-duration-default) var(--s-transition-timing-function-default);
	}

		a:is(:hover,:focus-visible) {
			color: var(--link-color-hover, var(--s-link-color-hover-default));
			text-decoration-color: transparent;
			transition-duration: 0ms;
		}

		a:active {
			color: var(--link-color-active, var(--s-link-color-active-default));
		}

	/* Set default address style */
	address {
		font-style: normal;
	}

	/* Reset list styles that have non-default styling */
	[role='list'],
	[role='listbox'],
	[role='tablist'] {
		list-style: none;
	}

	/* Reduce animations and transitions according to user preference */
	@media (prefers-reduced-motion: reduce) {
		*,
		::before,
		::after {
			animation-delay: -1ms !important;
			animation-duration: 1ms !important;
			animation-iteration-count: 1 !important;
			background-attachment: initial !important;
			scroll-behavior: auto !important;
			transition-duration: 1ms !important;
			transition-delay: -1ms !important;
		}
	}
}
@layer theme.typography {
	/* Headings */
	h1,
	.h1,
	h2,
	.h2,
	h3,
	.h3,
	h4,
	.h4,
	h5,
	.h5,
	h6,
	.h6,
	.display {
		display: block;
		text-wrap: balance;
		color: var(--s-headings-color-default);
		font-weight: var(--s-headings-font-weight-default);
		font-family: var(--s-headings-font-family-default);
		letter-spacing: var(--s-headings-letter-spacing-default);
	}

	h1,
	.h1 {
		font-size: var(--s-h1-font-size);
		line-height: var(--s-h1-line-height);
	}

	h2,
	.h2 {
		font-size: var(--s-h2-font-size);
		line-height: var(--s-h2-line-height);
	}

	h3,
	.h3 {
		font-size: var(--s-h3-font-size);
		line-height: var(--s-h3-line-height);
	}

	h4,
	.h4 {
		font-size: var(--s-h4-font-size);
		line-height: var(--s-h4-line-height);
	}

	h5,
	.h5 {
		font-size: var(--s-h5-font-size);
		line-height: var(--s-h5-line-height);
	}

	h6,
	.h6 {
		font-size: var(--s-h6-font-size);
		line-height: var(--s-h6-line-height);
	}

	.display {
		font-size: var(--s-display-font-size);
		line-height: var(--s-display-line-height);
	}

	/* General normalizing */
	sup {
		position: relative;
		font-size: 0.6em;
		inset-block-start: -0.52em;
		line-height: 1;
	}

	small {
		display: block;
		font-size: var(--s-sm-font-size);
	}
}
@layer utility {
	.sr-only {
		position: absolute;
		clip-path: rect(1px 1px 1px 1px);
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		padding: 0;
		border: 0;
		white-space: nowrap;
	}
}
/*
Primitive tokens are theme specific variables that are used to define the theme specific values for the design system.
These should never be used directly in the components. These should only be used to map to the semantic tokens.
*/
@layer theme {
	:root {
		/* Spacing */
		--p-spacing-1: 0.25rem;
		--p-spacing-2: 0.5rem;
		--p-spacing-3: 0.75rem;
		--p-spacing-4: 1rem;
		--p-spacing-5: 1.5rem;
		--p-spacing-6: 2rem;
		--p-spacing-7: 3rem;
		--p-spacing-8: 4rem;
		--p-spacing-9: 6rem;
		--p-spacing-10: 8rem;
		--p-spacing-11: 10rem;
		--p-spacing-12: 12rem;

		/* Colors -> system */
		--p-color-white: #fff;
		--p-color-white-rgb: 255 255 255;
		--p-color-black: #000;
		--p-color-black-rgb: 0 0 0;
		--p-color-focus: #0019ff;
		--p-color-gray: #ccc;

		/* Colors -> pistache */
		--p-color-pistache-20: #f4fff0;
		--p-color-pistache-40: #e5f4e0;
		--p-color-pistache-60: #c6e0be;
		--p-color-pistache-80: #abcf9f;
		--p-color-pistache-100: #8db480;

		/* Colors -> orange */
		--p-color-orange-20: #ffb19a;
		--p-color-orange-40: #ff7d56;
		--p-color-orange-60: #c52f02;
		--p-color-orange-80: #c52f02;
		--p-color-orange-100: #9a2400;

		/* Colors -> maroon */
		--p-color-maroon-20: #e589bb;
		--p-color-maroon-40: #aa246c;
		--p-color-maroon-60: #800045;
		--p-color-maroon-80: #5a0031;
		--p-color-maroon-100: #38001e;
		--p-color-maroon-100-rgb: 56 0 30;

		/* Colors -> pink */
		--p-color-pink-20: #fff2f7;
		--p-color-pink-40: #ffe3ed;
		--p-color-pink-60: #ffd3e3;
		--p-color-pink-80: #ffb7d1;
		--p-color-pink-100: #ff9fc2;

		/* Colors -> blue */
		--p-color-blue-40: #d5e5f4;
		--p-color-blue-60: #bcd7f0;
		--p-color-blue-100: #0095cc;

		/* Colors -> green */
		--p-color-green-20: #d0e8c8;
		--p-color-green-40: #02c564;
		--p-color-green-60: #00b35a;
		--p-color-green-80: #019d4f;

		/* Colors -> neutral */
		--p-color-neutral-50: #f5f5f5;
		--p-color-neutral-900: #151515;

		/* Colors -> error */
		--p-color-error: #fd316e;

		/* Colors -> success */
		--p-color-success: #31c980;

		/* Radius */
		--p-radius-0: 0;
		--p-radius-1: 0.25rem;
		--p-radius-2: 0.5rem;
		--p-radius-3: 0.75rem;
		--p-radius-4: 1rem;
		--p-radius-5: 1.5rem;
		--p-radius-6: 2rem;

		/* Font weight */
		--p-font-weight-light: 300;
		--p-font-weight-regular: 400;
		--p-font-weight-bold: 700;

		/* Font family */
		--p-font-family-default: 'DMSans', sans-serif;
		--p-font-family-headings: 'CriteriaCF', sans-serif;

		/* Interactive outlines */
		--p-outline-width: 0.125rem;
		--p-outline-offset: 0.125rem;
		--p-outline-style: solid;
		--p-outline-color: var(--p-color-focus);

		/* Animation duration */
		--p-duration-perceptive-instant: 85ms;
		--p-duration-fast: 150ms;
		--p-duration-normal: 250ms;
		--p-duration-slow: 500ms;
		--p-duration-user-flow: 5000ms;
		--p-duration-attention-span: 12000ms;

		/* Animation easing */
		--p-swift-alt: cubic-bezier(0.55, 0, 0.1, 1);
		--p-swift-move: cubic-bezier(0.4, 0, 0.2, 1);
		--p-swifter-move: cubic-bezier(0.4, 0, 0, 1);
		--p-heavy-move: cubic-bezier(0.7, 0, 0.6, 1);
		--p-swift-out: cubic-bezier(0, 0, 0.2, 1);
		--p-swift-in: cubic-bezier(0.4, 0, 1, 1);
		/* Colors */
		--s-body-color-default: var(--p-color-maroon-100);
		--s-headings-color-default: var(--p-color-maroon-100);

		--s-link-color-default: var(--p-color-neutral-900);
		--s-link-color-hover-default: var(--p-color-orange-60);
		--s-link-color-active-default: var(--p-color-orange-100);

		--s-page-theme: var(--p-color-pink-40);
		--s-page-theme-secondary: var(--p-color-pink-60);
		--s-page-theme-tertiary: var(--p-color-pink-80);
		--s-page-theme-quaternary: transparent;
		--s-page-theme-button: var(--p-color-orange-60);
		--s-page-theme-button-hover: var(--p-color-orange-40);
		--s-page-theme-button-active: var(--p-color-orange-100);

		--s-pattern-theme: var(--p-color-pink-20);

		/* Typography */
		--s-headings-font-family-default: var(--p-font-family-headings);
		--s-headings-font-weight-default: var(--p-font-weight-bold);
		--s-headings-letter-spacing-default: 0.02em;
		--s-body-font-family-default: var(--p-font-family-default);
		--s-body-font-weight-default: var(--p-font-weight-regular);
		--s-body-font-size-default: 1rem;
		--s-body-line-height-default: 1.5;

		--s-display-font-size: clamp(2.625rem, 4.643dvi + 0.768rem, 4.25rem);
		--s-display-line-height: 1;

		--s-h1-font-size: clamp(2.125rem, 4.643dvi + 0.268rem, 3.75rem);
		--s-h1-line-height: 1;

		--s-h2-font-size: clamp(1.875rem, 2.25dvi + 0.975rem, 3rem);
		--s-h2-line-height: 1;

		--s-h3-font-size: clamp(1.75rem, 0.714dvi + 1.464rem, 2rem);
		--s-h3-line-height: 1.125;

		--s-h4-font-size: clamp(1.25rem, 0.714dvi + 0.964rem, 1.5rem);
		--s-h4-line-height: 1.167;

		--s-h5-font-size: clamp(1.125rem, 0.357dvi + 0.982rem, 1.25rem);
		--s-h5-line-height: 1.3;

		--s-h6-font-size: clamp(1rem, 1.04dvi + 0.5rem, 1.125rem);
		--s-h6-line-height: 1.4;

		--s-lead-font-size: 1.125rem;
		--s-paragraph-font-size: var(--s-body-font-size-default);
		--s-sm-font-size: 0.875rem;

		/* Outline */
		--s-outline-default: var(--p-outline-width) var(--p-outline-style) var(--p-outline-color);

		/* Border radius */
		--s-border-radius-default: var(--p-radius-1);

		/* Animation */
		--s-transition-duration-default: var(--p-duration-fast);
		--s-transition-timing-function-default: linear;

		/* Layout */
		--s-layout-padding-inline: clamp(var(--p-spacing-4), 4.16dvi, var(--p-spacing-9));
		--s-layout-content-width: 78rem;
		--s-layout-breakout-width: 82rem;
		/* Component tokens here */
	}
}
@layer theme {
}
@layer theme {
}