/**
 * Fylgja (https://fylgja.dev)
 * Licensed under MIT Open Source
 */
:where(:root) {
	--ratio-box: 1;
	--ratio-landscape: 4/3;
	--ratio-portrait: 3/4;
	--ratio-widescreen: 16/9;
	--ratio-superwide: 21/9;
	--ratio-ultrawide: 18/5;
	--ratio-golden: 1.618/1;
	--border-size-1: 1px;
	--border-size-2: 2px;
	--border-size-3: 4px;
	--border-size-4: 8px;
	--border-size-5: 12px;
	--radius-1: 0.125rem;
	--radius-2: 0.25rem;
	--radius-3: 0.5rem;
	--radius-4: 1rem;
	--radius-5: 2rem;
	--radius-6: 3rem;
	--radius-full: 1e5px;
	--color-0: oklch(99% calc(.03 * var(--chroma, 1)) var(--hue, 0));
	--color-1: oklch(95% calc(.06 * var(--chroma, 1)) var(--hue, 0));
	--color-2: oklch(90% calc(.12 * var(--chroma, 1)) var(--hue, 0));
	--color-3: oklch(88% calc(.14 * var(--chroma, 1)) var(--hue, 0));
	--color-4: oklch(82% calc(.16 * var(--chroma, 1)) var(--hue, 0));
	--color-5: oklch(78% calc(.17 * var(--chroma, 1)) var(--hue, 0));
	--color-6: oklch(68% calc(.19 * var(--chroma, 1)) var(--hue, 0));
	--color-7: oklch(58% calc(.21 * var(--chroma, 1)) var(--hue, 0));
	--color-8: oklch(52% calc(.20 * var(--chroma, 1)) var(--hue, 0));
	--color-9: oklch(44% calc(.18 * var(--chroma, 1)) var(--hue, 0));
	--color-10: oklch(35% calc(.15 * var(--chroma, 1)) var(--hue, 0));
	--color-11: oklch(28% calc(.12 * var(--chroma, 1)) var(--hue, 0));
	--color-12: oklch(20% calc(.10 * var(--chroma, 1)) var(--hue, 0));
	--color-13: oklch(15% calc(.07 * var(--chroma, 1)) var(--hue, 0));
	--color-14: oklch(11% calc(.05 * var(--chroma, 1)) var(--hue, 0));
	--hue-pink: 350;
	--hue-purple: 330;
	--hue-violet: 310;
	--hue-indigo: 290;
	--hue-blue: 260;
	--hue-cyan: 220;
	--hue-teal: 170;
	--hue-green: 140;
	--hue-lime: 125;
	--hue-yellow: 96;
	--hue-orange: 70;
	--hue-red: 25;
	--ease-1: cubic-bezier(0.25, 0.1, 0.1, 1);
	--ease-2: cubic-bezier(0.25, 0.1, 0.2, 1);
	--ease-3: cubic-bezier(0.25, 0.1, 0.3, 1);
	--ease-4: cubic-bezier(0.25, 0.1, 0.4, 1);
	--ease-5: cubic-bezier(0.25, 0.1, 0.5, 1);
	--ease-in-1: cubic-bezier(0.3, 0, 1, 1);
	--ease-in-2: cubic-bezier(0.5, 0, 1, 1);
	--ease-in-3: cubic-bezier(0.7, 0, 1, 1);
	--ease-in-4: cubic-bezier(0.9, 0, 1, 1);
	--ease-in-5: cubic-bezier(1, 0, 1, 1);
	--ease-out-1: cubic-bezier(0, 0, 0.7, 1);
	--ease-out-2: cubic-bezier(0, 0, 0.5, 1);
	--ease-out-3: cubic-bezier(0, 0, 0.3, 1);
	--ease-out-4: cubic-bezier(0, 0, 0.1, 1);
	--ease-out-5: cubic-bezier(0, 0, 0, 1);
	--ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
	--ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
	--ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
	--ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
	--ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);
	--ease-elastic-in-1: cubic-bezier(0.5, 0.25, 0.75, -0.25);
	--ease-elastic-in-2: cubic-bezier(0.5, 0, 0.75, -0.25);
	--ease-elastic-in-3: cubic-bezier(0.5, -0.25, 0.75, -0.25);
	--ease-elastic-in-4: cubic-bezier(0.5, -0.5, 0.75, -0.25);
	--ease-elastic-in-5: cubic-bezier(0.5, -0.75, 0.75, -0.25);
	--ease-elastic-out-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
	--ease-elastic-out-2: cubic-bezier(0.5, 1, 0.75, 1.25);
	--ease-elastic-out-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
	--ease-elastic-out-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
	--ease-elastic-out-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
	--ease-elastic-in-out-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);
	--ease-elastic-in-out-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);
	--ease-elastic-in-out-3: cubic-bezier(0.5, -0.5, 0.1, 1.5);
	--ease-elastic-in-out-4: cubic-bezier(0.5, -0.7, 0.1, 1.5);
	--ease-elastic-in-out-5: cubic-bezier(0.5, -0.9, 0.1, 1.5);
	--font-size-1: 0.875rem;
	--font-size-2: 1rem;
	--font-size-3: 1.125rem;
	--font-size-4: 1.25rem;
	--font-size-5: 1.5rem;
	--font-size-6: 2rem;
	--font-size-7: 2.5rem;
	--font-size-8: 3rem;
	--font-size-9: 3.5rem;
	--font-size-fluid-1: clamp(0.875rem, 1.5cqi, 1rem);
	--font-size-fluid-2: clamp(1rem, 2cqi, 1.125rem);
	--font-size-fluid-3: clamp(1.25rem, 2cqi, 1.5rem);
	--font-size-fluid-4: clamp(1.5rem, 3cqi, 2rem);
	--font-size-fluid-5: clamp(2rem, 5cqi, 3.5rem);
	--line-height-1: 1.1;
	--line-height-2: 1.25;
	--line-height-3: 1.375;
	--line-height-4: 1.5;
	--line-height-5: 1.8;
	--shadow-color: hsl(0 0 0 / 10%);
	--shadow-1: 0 2px 1px -1px var(--shadow-color), 0 1px 1px var(--shadow-color), 0 1px 3px var(--shadow-color);
	--shadow-2: 0 3px 3px -2px var(--shadow-color), 0 3px 4px var(--shadow-color), 0 1px 8px var(--shadow-color);
	--shadow-3: 0 3px 5px -1px var(--shadow-color), 0 6px 10px var(--shadow-color), 0 1px 18px var(--shadow-color);
	--shadow-4: 0 5px 5px -3px var(--shadow-color), 0 8px 10px 1px var(--shadow-color), 0 3px 14px 2px var(--shadow-color);
	--shadow-5: 0 7px 8px -4px var(--shadow-color), 0 12px 17px 2px var(--shadow-color), 0 5px 22px 4px var(--shadow-color);
	--shadow-6: 0 8px 10px -5px var(--shadow-color), 0 16px 24px 2px var(--shadow-color), 0 6px 30px 5px var(--shadow-color);
	--spacing: 0.25rem;
	--size-1: calc(var(--spacing) * 1);
	--size-2: calc(var(--spacing) * 2);
	--size-3: calc(var(--spacing) * 3);
	--size-4: calc(var(--spacing) * 4);
	--size-5: calc(var(--spacing) * 5);
	--size-6: calc(var(--spacing) * 6);
	--size-7: calc(var(--spacing) * 7);
	--size-8: calc(var(--spacing) * 8);
	--size-9: calc(var(--spacing) * 9);
	--size-10: calc(var(--spacing) * 10);
	--size-12: calc(var(--spacing) * 12);
	--size-14: calc(var(--spacing) * 14);
	--size-16: calc(var(--spacing) * 16);
	--size-18: calc(var(--spacing) * 18);
	--size-20: calc(var(--spacing) * 20);
	--size-24: calc(var(--spacing) * 24);
	--size-28: calc(var(--spacing) * 28);
	--size-32: calc(var(--spacing) * 32);
	--size-36: calc(var(--spacing) * 36);
	--size-40: calc(var(--spacing) * 40);
	--size-50: calc(var(--spacing) * 50);
	--size-60: calc(var(--spacing) * 60);
	--size-70: calc(var(--spacing) * 70);
	--size-80: calc(var(--spacing) * 80);
	--size-90: calc(var(--spacing) * 90);
	--size-100: calc(var(--spacing) * 100);
	--size-120: calc(var(--spacing) * 120);
	--size-05: calc(var(--spacing) * 0.5);
	--size-heading: 36ch;
	--size-content: 64ch;
	--layer-1: 1;
	--layer-2: 2;
	--layer-3: 4;
	--layer-4: 6;
	--layer-5: 8;
}

@media (prefers-color-scheme: dark) {
	:where(:root) {
		--shadow-color: hsl(220 40% 2% / 25%);
	}
}
@property --hue { syntax: "<angle> | <number>"; inherits: true; initial-value: 0; }

@property --shadow-color { syntax: "<color>"; inherits: true; initial-value: hsl(0 0 0 / 10%); }