:root {

	/***************************************
			Colors
	****************************************/

	--color-primary: oklch(56% 0.17 6);
	--color-primary-low: oklch(from var(--wp--preset--color--primary) 65% 0.17 h);
	--color-primary-base: oklch(from var(--wp--preset--color--primary) 94% 0.03 h);

	--color-secondary: oklch(49% 0.1 290);
	--color-secondary-base: oklch(from var(--wp--preset--color--secondary) 94% 0.03 h);

	--color-base-high: oklch(from var(--wp--preset--color--primary) 1 0 h);
	--color-base: oklch(from var(--wp--preset--color--primary) 98% 0.005 h);
	--color-base-low: oklch(from var(--wp--preset--color--primary) 95% 0.01 h);
	--color-base-secondary: oklch(from var(--wp--preset--color--secondary) 98% 0.005 h);

	--color-contrast-low: oklch(from var(--wp--preset--color--primary) 80% 0.01 h);
	--color-contrast: oklch(from var(--wp--preset--color--primary) 40% 0.01 h);
	--color-contrast-high: oklch(from var(--wp--preset--color--primary) 25% 0.01 h);

	--color-link: var(--wp--preset--color--primary);
	--color-link-hover: oklch(from var(--color-link) calc(l - 0.1) c h);
	--color-button: var(--wp--preset--color--primary);
	--color-button-hover: oklch(from var(--color-button) calc(l - 0.1) c h);
	--color-accent: var(--wp--preset--color--secondary);

}
@supports not (background-color: oklch(0% 0 0)) {
	:root {

	--color-primary: #c13d65;
	--color-primary-low: #e05a7f;
	--color-primary-base: #fee3e8;

	--color-secondary: #605595;
	--color-secondary-base: #eae8ff;

	--color-base-high: #ffffff;
	--color-base: #fcf7f8;
	--color-base-low: #f5eced;
	--color-base-secondary: #f8f8fc;

	--color-contrast-low: #c4bbbd;
	--color-contrast: #4d4647;
	--color-contrast-high: #262021;

	--color-link: var(--wp--preset--color--primary);
	--color-link-hover: #9e1749;
	--color-button: var(--wp--preset--color--primary);
	--color-button-hover: #9e1749;
	--color-accent: var(--wp--preset--color--secondary);

	}
}


:root {
	
	/***************************************
			Typography & spacings
	****************************************/

	--fontsize-m-min: 18;
	--fontsize-m-max: 22;
	--fontsize-min-scale: 1.2;
	--fontsize-max-scale: 1.3;

	--space-m-min: 20;
	--space-m-max: 24;

	--fluid-min-width: 480;
	--fluid-max-width: 1200;
	--screen-width: 100vw;
	
	--body-width: 100vw;

}
@media screen and (min-width:1200px) {
	:root {
		--screen-width: calc(var(--fluid-max-width) * 1px);
	}
}
@media screen and (min-width:1920px) {
	:root {
		--body-width: 1920px;
	}
}
@media screen and (max-width:480px) {
	:root {
		--screen-width: calc(var(--fluid-min-width) * 1px);
	}
}
:root {

	--fluid-ratio: calc( (var(--screen-width) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));

	--fontsize-xs: calc( var(--fontsize-m) * 0.7 );
	--fontsize-s: calc( var(--fontsize-m) * 0.8 );

	--fontsize-m: calc( ((var(--fontsize-m-min) / 16) * 1rem) + (var(--fontsize-m-max) - var(--fontsize-m-min)) * var(--fluid-ratio) );

	--fontsize-l-min: calc(var(--fontsize-m-min) * var(--fontsize-min-scale));
	--fontsize-l-max: calc(var(--fontsize-m-max) * var(--fontsize-max-scale));
	--fontsize-l: calc( ((var(--fontsize-l-min) / 16) * 1rem) + (var(--fontsize-l-max) - var(--fontsize-l-min)) * var(--fluid-ratio) );

	--fontsize-xl-min: calc(var(--fontsize-l-min) * var(--fontsize-min-scale));
	--fontsize-xl-max: calc(var(--fontsize-l-max) * var(--fontsize-max-scale));
	--fontsize-xl: calc( ((var(--fontsize-xl-min) / 16) * 1rem) + (var(--fontsize-xl-max) - var(--fontsize-xl-min)) * var(--fluid-ratio) );

	--fontsize-xxl-min: calc(var(--fontsize-xl-min) * var(--fontsize-min-scale));
	--fontsize-xxl-max: calc(var(--fontsize-xl-max) * var(--fontsize-max-scale));
	--fontsize-xxl: calc( ((var(--fontsize-xxl-min) / 16) * 1rem) + (var(--fontsize-xxl-max) - var(--fontsize-xxl-min)) * var(--fluid-ratio) );

	--fontsize-3xl-min: calc(var(--fontsize-xxl-min) * var(--fontsize-min-scale));
	--fontsize-3xl-max: calc(var(--fontsize-xxl-max) * var(--fontsize-max-scale));
	--fontsize-3xl: calc( ((var(--fontsize-3xl-min) / 16) * 1rem) + (var(--fontsize-3xl-max) - var(--fontsize-3xl-min)) * var(--fluid-ratio) );

	--fontsize-4xl-min: calc(var(--fontsize-3xl-min) * var(--fontsize-min-scale));
	--fontsize-4xl-max: calc(var(--fontsize-3xl-max) * var(--fontsize-max-scale));
	--fontsize-4xl: calc( ((var(--fontsize-4xl-min) / 16) * 1rem) + (var(--fontsize-4xl-max) - var(--fontsize-4xl-min)) * var(--fluid-ratio) );

	--fontsize-hero-min: var(--fontsize-3xl-min);
	--fontsize-hero-max: var(--fontsize-4xl-max);
	--fontsize-hero: calc( ((var(--fontsize-hero-min) / 16) * 1rem) + (var(--fontsize-hero-max) - var(--fontsize-hero-min)) * var(--fluid-ratio) );

	--space-xxs: calc(var(--space-m) * 0.25);
	--space-xs: calc(var(--space-m) * 0.5);
	--space-s: calc(var(--space-m) * 0.75);
	--space-m: calc(((var(--space-m-min) / 16) * 1rem) + (var(--space-m-max) - var(--space-m-min)) * var(--fluid-ratio));
	--space-l: calc(var(--space-m) * 1.5);
	--space-xl: calc(var(--space-m) * 2);
	--space-xxl: calc(var(--space-m) * 3);

	--space-stretch-min: calc(var(--space-m-min) * 0.75);
	--space-stretch-max: calc(var(--space-m-max) * 1.5);
	--space-stretch: calc(((var(--space-stretch-min) / 16) * 1rem) + (var(--space-stretch-max) - var(--space-stretch-min)) * var(--fluid-ratio));

	--space-s-m-min: calc(var(--space-m-min) * 0.75);
	--space-s-m-max: var(--space-m-max);
	--space-s-m: calc(((var(--space-s-m-min) / 16) * 1rem) + (var(--space-s-m-max) - var(--space-s-m-min)) * var(--fluid-ratio));

	--space-edge-min: 10;
	--space-edge-max: 80;
	--space-edge: calc(((var(--space-edge-min) / 16) * 1rem) + (var(--space-edge-max) - var(--space-edge-min)) * var(--fluid-ratio));


/***************************************
				Settings
***************************************/

	--frame-radius: 10px;
	--image-radius: var(--frame-radius);
	--button-radius: 10px;
	--input-radius: 3px;

	--button-fontweight: 500;
	--bold-fontweight: 600;

	--frame-shadow: var(--wp--preset--shadow--light);
	--image-shadow: var(--frame-shadow);

	--global-duration: 0.1s;
	--hover-filter: brightness(1.2);

    --button-y-padding: 0.5em;
    --button-x-padding: 1.5em;
	--button-padding: var(--button-y-padding) var(--button-x-padding);
    --input-padding: 0.4em 0.8em;
    --badge-padding: 0.25em 0.7em;

	--decoration-thickness: 5px;

}