@layer base {
	:root {
		/* container */
		& {
			--container-width: 1280px;
			--vw-pt: 1440;
			--vh-pt: 720;
		}

		/* typography */
		& {
			--font-sans: 'Inter', sans-serif;
			--font-display: 'ivypresto-display', serif;

			--text-px: calc(1rem / 16);
			--text-xs: calc(10 * var(--text-px));
			--text-sm: calc(12 * var(--text-px));
			--text-base: calc(14 * var(--text-px));
			--text-md: calc(18 * var(--text-px));
			--text-lg: calc(20 * var(--text-px));
			--text-xl: calc(24 * var(--text-px));
			--text-2xl: calc(32 * var(--text-px));
			--text-3xl: calc(40 * var(--text-px));
			--text-4xl: calc(48 * var(--text-px));

			--leading-normal: 1.25;
			--tracking-normal: -0.01em;
		}

		/* border radii */
		& {
			--radius-xs: calc(var(--radius) - 4px);
			--radius-sm: calc(var(--radius) - 8px);
			--radius: 10px;
			--radius-md: calc(var(--radius) + 8px);
			--radius-lg: calc(var(--radius) + 16px);
			--radius-xl: calc(var(--radius) + 24px);
			--radius-2xl: calc(var(--radius) + 32px);
			--radius-full: 9999px;
		}

		/* colors */
		& {
			--color-bg-1: #fff;
			--color-bg-2: #f2efed;

			--color-fg-1: #301a0f;
			--color-fg-2: #b7ac91;
			--color-fg-3: #755d51;

			--color-accent-1: #fde023;
			--color-on-accent-1: var(--color-fg-1);

			--color-primary-1: #d6ccb3;
			--color-on-primary-1: var(--color-fg-1);

			--color-border: #d6d1cf;

			--color-overlay: #0003;
		}

		/* easings */
		& {
			--ease-in: cubic-bezier(0.64, 0, 0.78, 0);
			--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
			--ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);

			--default-transition-duration: 0.5s;
			--default-transition-timing-function: var(--ease-out);
		}
	}

	/* Reset */
	body {
		margin: 0;
		padding: 0;
	}

	:where(*) {
		box-sizing: border-box;
	}

	:where(button, h1, h2, h3, h4, h5, h6, p, fieldset) {
		all: unset;
		display: block;
		box-sizing: border-box;
	}

	:where(input) {
		margin: 0;
	}

	:where(a) {
		text-decoration: none;
		color: inherit;
	}

	:where(img, video) {
		max-width: 100%;
		height: auto;
		display: block;
		object-fit: cover;
	}

	:where(table) {
		border-collapse: collapse;
		border-spacing: 0;
		width: 100%;
	}

	:where(hr) {
		border: none;
		border-bottom: 1px solid var(--color-border);
		margin: 0;
		padding: 0;
	}

	/* default styles */
	body {
		background: var(--color-bg-1);
		color: var(--color-fg-1);
		font-family: var(--font-sans);
		font-weight: 500;
		font-size: var(--text-base);
		line-height: var(--leading-normal);
		letter-spacing: var(--tracking-normal);

		scrollbar-gutter: stable;
		padding: env(safe-area-inset-top) env(safe-area-inset-right)
			env(safe-area-inset-bottom) env(safe-area-inset-left);
	}

	:where(*) {
		transition: none;
		transition-duration: var(--default-transition-duration);
		transition-timing-function: var(--default-transition-timing-function);
	}
}