@layer base {
	/* Anything that has been anchored to should have extra scroll margin */

	:target {
		scroll-margin-block: 5ex;
	}
	:root {
		/* Colors */
		--color-dark: #121212;
		--color-dark-glare: #000;
		--color-white: #fff;
		--color-mid: #cccccc;
		--color-dark-grey: #2a2a2a;
		--color-grey: #5a5a5a;
		--color-light: #f5f5f5;
		--color-primary: #121212;

		/* Utopia Fluid Type Scale */
		/* @link https://utopia.fyi/type/calculator?c=360,16,1.2,1537,20,1.25,10,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
		--step--3: clamp(0.5787rem, 0.56rem + 0.0833vw, 0.64rem);
		--step--2: clamp(0.6944rem, 0.6622rem + 0.1435vw, 0.8rem);
		--step--1: clamp(0.8333rem, 0.7824rem + 0.2266vw, 1rem);
		--step-0: clamp(1rem, 0.9235rem + 0.3398vw, 1.25rem);
		--step-1: clamp(1.2rem, 1.0891rem + 0.4928vw, 1.5625rem);
		--step-2: clamp(1.44rem, 1.2831rem + 0.6975vw, 1.9531rem);
		--step-3: clamp(1.728rem, 1.5098rem + 0.9698vw, 2.4414rem);
		--step-4: clamp(2.0736rem, 1.7744rem + 1.3297vw, 3.0518rem);
		--step-5: clamp(2.4883rem, 2.0826rem + 1.8031vw, 3.8147rem);
		--step-6: clamp(2.986rem, 2.4408rem + 2.423vw, 4.7684rem);
		--step-7: clamp(3.5832rem, 2.8561rem + 3.2317vw, 5.9605rem);
		--step-8: clamp(4.2998rem, 3.3361rem + 4.2831vw, 7.4506rem);
		--step-9: clamp(5.1598rem, 3.8894rem + 5.6461vw, 9.3132rem);
		--step-10: clamp(6.1917rem, 4.5248rem + 7.4084vw, 11.6415rem);

		/* Utopia Fluid Space Scale */
		/* @link https://utopia.fyi/space/calculator?c=360,16,1.2,1537,20,1.25,10,2,&s=0.75|0.5|0.25|0.25|0.25,1.5|2|3|4|6|6,s-l&g=s,l,xl,12 */
		--space-5xs: clamp(0.25rem, 0.2309rem + 0.085vw, 0.3125rem);
		--space-4xs: clamp(0.25rem, 0.2309rem + 0.085vw, 0.3125rem);
		--space-3xs: clamp(0.25rem, 0.2309rem + 0.085vw, 0.3125rem);
		--space-2xs: clamp(0.5rem, 0.4618rem + 0.1699vw, 0.625rem);
		--space-xs: clamp(0.75rem, 0.6927rem + 0.2549vw, 0.9375rem);
		--space-s: clamp(1rem, 0.9235rem + 0.3398vw, 1.25rem);
		--space-m: clamp(1.5rem, 1.3853rem + 0.5098vw, 1.875rem);
		--space-l: clamp(2rem, 1.8471rem + 0.6797vw, 2.5rem);
		--space-xl: clamp(3rem, 2.7706rem + 1.0195vw, 3.75rem);
		--space-2xl: clamp(4rem, 3.6941rem + 1.3594vw, 5rem);
		--space-3xl: clamp(6rem, 5.5412rem + 2.0391vw, 7.5rem);
		--space-4xl: clamp(6rem, 5.5412rem + 2.0391vw, 7.5rem);

		/* One-up pairs */
		--space-5xs-4xs: clamp(0.25rem, 0.2309rem + 0.085vw, 0.3125rem);
		--space-4xs-3xs: clamp(0.25rem, 0.2309rem + 0.085vw, 0.3125rem);
		--space-3xs-2xs: clamp(0.25rem, 0.1353rem + 0.5098vw, 0.625rem);
		--space-2xs-xs: clamp(0.5rem, 0.3662rem + 0.5947vw, 0.9375rem);
		--space-xs-s: clamp(0.75rem, 0.5971rem + 0.6797vw, 1.25rem);
		--space-s-m: clamp(1rem, 0.7324rem + 1.1895vw, 1.875rem);
		--space-m-l: clamp(1.5rem, 1.1941rem + 1.3594vw, 2.5rem);
		--space-l-xl: clamp(2rem, 1.4647rem + 2.3789vw, 3.75rem);
		--space-xl-2xl: clamp(3rem, 2.3883rem + 2.7188vw, 5rem);
		--space-2xl-3xl: clamp(4rem, 2.9295rem + 4.7579vw, 7.5rem);
		--space-3xl-4xl: clamp(6rem, 5.5412rem + 2.0391vw, 7.5rem);

		/* Custom pairs */
		--space-s-l: clamp(1rem, 0.5412rem + 2.0391vw, 2.5rem);

		/* Utopia Grid */
		--grid-max-width: 100%;

		/* --grid-max-width: 77.5rem; */
		--grid-gutter: var(--space-s-l);
		--grid-columns: 12;

		/* Typography */
		--leading-micro: 0.85;
		--leading-flat: 1;
		--leading-fine: 1.2;
		--leading-standard: 1.45;
		--leading-loose: 1.7;
		--text-transform: uppercase;
		--leading-step2: 2.9cap;
		--leading-heading: 1.16cap;
		--soft-edges: 0.01em;
		--logo-width: 155px;
		--letterspacing-loose: 0.01em;
		--letterspacing-base: -0.02em;
		--letterspacing-neutral: 0em;
		--letterspacing-tight: -0.04em;
		--font-base: 'Inter', system-ui, -apple-system, sans-serif;
		--font-heading: 'Druk Heavy', system-ui, Arial, sans-serif;
		--font-heading-alt: 'Druk Medium', system-ui, Arial, sans-serif;
		--font-alt: 'Druk Wide', system-ui, Arial, sans-serif;
		--font-button: 'Druk Wide', system-ui, Arial, sans-serif;
		--font-mono: DM Mono, monospace;
		--font-icon: 'remixicon';
		--font-regular: 450;
		--font-medium: 500;
		--font-semibold: 600;
		--font-bold: 700;
		--font-black: 900;

		--gutter: var(--space-m-l);
		--transition-base: 0.3s cubic-bezier(0.625, 0.05, 0, 1);
		--transition-movement: 200ms linear;
		--transition-fade: 300ms ease;
		--transition-alt: linear(
			0,
			0.22 7.5%,
			0.42 12%,
			0.58 16.5%,
			0.72 22%,
			0.82 28%,
			0.9 39%,
			0.95 52%,
			0.98 59%,
			1
		);

		--stroke-width: 1px;
		--stroke: var(--stroke-width) solid currentColor;
		--indent-size: var(--space-xs-l);
		--radius-s: 0.2rem;
		--radius-m: 0.75rem;
		--radius-l: 2.5rem;
		--device-min-width: 310px;

		--underline-link-height: 0.075em;
		--underline-link-offset: -0.0625em;
	}

	.transform {
		--tw-translate-x: 0;
		--tw-translate-y: 0;
		--tw-rotate: 0;
		--tw-skew-x: 0;
		--tw-skew-y: 0;
		--tw-scale-x: 1;
		--tw-scale-y: 1;
	}

	.filter {
		--tw-blur: ;
		--tw-brightness: ;
		--tw-contrast: ;
		--tw-grayscale: ;
		--tw-hue-rotate: ;
		--tw-invert: ;
		--tw-saturate: ;
		--tw-sepia: ;
		--tw-drop-shadow: ;
	}
}