@font-face {
	font-family: 'SuperGroteskPro';
	src: url('./fonts/SuperGroteskPro.otf') format('opentype');
}

/* Global */
* {
	border: 0;
	margin: 0;
	outline: none;

	user-select: none;
	box-sizing: border-box;
}

/* Scrollbars */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	border: transparent;
	border-radius: 20px;
	background-color: rgba(155, 155, 155, 0.5);
}

/* Root */
body {
	width: 100vw;
	height: 100vh;
  
	overscroll-behavior: none;
	background-color: #FFFFFF;
}

.svelte {
	width: 100vw;
	height: 100vh;

	overflow: none;
	background-color: #FFFFFF;
}

.theme {
	/* Typography */
	--font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif;
	--font-mono: 'Fira Mono', monospace;
	font-family: var(--font-body);	

	--font-tiny: 10px;
	--font-small: 14px;
	--font-medium: 18px;
	--font-large: 22px;
	--font-xlarge: 24px;
	--font-xxlarge: 26px;
	--font-xxxlarge: 32px;
  
	/* Spacing */
	--spacing-inline: 4px;
	--spacing-default: 8px;
	--spacing-gutter: 16px;
	--spacing-bleed: 24px;
	--spacing-whitespace: 40px;
	--spacing-macro: 64px;
  
	/* Colors */
	--white: #ffffff;
	--black: #111111;
	--light-blue: #d2edff;
	--blue: #00a9ff;
	--dark-blue: #3784c2;
	--cyan: #63d1ea;
	--dark-purple: #2F0858;
	--teal: #429288;
	--green: #4ca043;
	--dark-green: #4ca054;
	--yellow: #e9b05f;
	--light-yellow: #fdf8c9;
	--orange: #da612b;
	--light-orange: #f8d8b0;
	--light-red: #fbb3bc;
	--red: #ee011d;
	--light-purple: #a28ff3;
	--purple: #69159f;
	--dark-purple: #270041;
	--pink: #da5797;
  
	/* Background */
	--primary-background: #F4F4F4;
	--secondary-background: #FFFFFF;
	--product-background: #efefef;
  
	--black: #000000;
	--dark-grey: #191919;
	--grey: #202020;
	--light-grey: #2f2f2f;
  
	/* Text */
	--primary-text: #333333;
	--primary-border: #e7e7e7;
  
	--secondary-text: #444444;
	--secondary-border: #333333;
  
	/* Buttons */
	--primary-button: #FFFFFF;
	--primary-button-background: #FFFFFF;
	--primary-button-hover: #dbdbdb;
	--primary-button-active: #dbdbdb;
	--primary-button-text: #202020;
  
	--secondary-button: #202020;
	--secondary-button-hover: #3e3e3e;
	--secondary-button-active: #303030;
	--secondary-button-text: #efefef;

	--highlight-button: var(--pink);
	--highlight-button-hover: #3e3e3e;
	--highlight-button-active: #303030;
	--highlight-button-text: #efefef;
	--highlight-button-text: #ffffff;
  
	--critical-button: #2F0858;
	--critical-button-hover: #420c7c;
	--critical-button-active: #420c7c;
	--critical-button-text: #FFFFFF;
  
	/* Errors */
	--error: #e15141;
	--success: #41e186;
  
	/* Focus */
	--focus: #3b7fc8;
	--hover: #f0f0f0;
  
	/* Dropzones */
	--dropzone: #3b7fc8;
  
	/* Disabled */
	--disabled: #b4b4b4;
  
	/* Shadows */
	--shadow: 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 2px -1px rgba(0, 0, 0, 0.8);
	--shadow-small: 0px 1px 2px rgba(0, 0, 0, 0.8);
	--shadow-medium: 0px 4px 6px -1px rgba(0, 0, 0, 0.2),
	  0px 2px 4px -2px rgba(0, 0, 0, 0.8);
	--shadow-large: 0px 10px 15px -3px rgba(0, 0, 0, 0.2),
	  0px 4px 6px -4px rgba(0, 0, 0, 0.8);
  
	/* Spacing */
	--spacing-inline: 4px;
	--spacing-default: 8px;
	--spacing-gutter: 16px;
	--spacing-bleed: 24px;
	--spacing-whitespace: 40px;
	--spacing-macro: 64px;
  
	/* Borders */
	--border-radius: 10px;
	--border-radius-small: 5px;
	--border-radius-medium: 20px;
	--border-radius-large: 40px;
	--element-radius: 15px;
}