:root {
	--base-col-primary: oklch(60% 33% 260deg);
	--base-col-interactive: oklch(from var(--col-primary) 50% 60% h);
	--base-col-danger: oklch(from var(--col-interactive) 55% c 30deg);
	--base-col-warning: oklch(from var(--col-interactive) 55% c 70deg);
	--base-col-success: oklch(from var(--col-interactive) 55% c 170deg);
	--base-col-text: oklch(from var(--col-primary) 35% 20% h);
	--base-col-gray: color-mix(in srgb, var(--col-text) 40%, white);
	--base-col-contrast: color-mix(in srgb, var(--col-text) 8%, white);

	--col-primary: var(--base-col-primary);
	--col-interactive: var(--base-col-interactive);
	--col-danger: var(--base-col-danger);
	--col-warning: var(--base-col-warning);
	--col-success: var(--base-col-success);
	--col-text: var(--base-col-text);
	--col-gray: var(--base-col-gray);
	--col-contrast: var(--base-col-contrast);
	--col-foreground: var(--base-col-contrast);
	--col-background: white;
		
	&.dark-theme {
		--col-primary: oklch(from var(--base-col-primary) 90% 15% h);
		--col-interactive: oklch(from var(--base-col-interactive) 90% 55% h);
		--col-danger: oklch(from var(--base-col-danger) 75% 65% h);
		--col-warning: oklch(from var(--base-col-warning) 75% 65% h);
		--col-success: oklch(from var(--base-col-success) 75% 65% h);
		--col-text: oklch(from var(--base-col-primary) 100% 5% h);
		--col-gray: oklch(from var(--base-col-gray) 60% c h);
		--col-contrast: oklch(from var(--base-col-text) 25% 3.5% h);
		--col-foreground: var(--col-contrast);
		--col-background: oklch(from var(--base-col-text) 15% 3.5% h);
	}

	--user-col: var(--col-primary);
	--user-col-contrast: var(--col-background);

	*:focus-visible {
		outline-color: rgb(from var(--col-interactive) r g b / 15%);
	}

	--col-red: var(--col-danger);
	--col-green: var(--col-success);
	--col-white: white;
	
	--xxxs: 0.5rem;
	--xxs: 0.75rem;
	--xs: 1rem;
	--sm: 2rem;
	--md: 3rem;
	--lg: 5rem;
	--xl: 7.5rem;
	--xxl: 10rem;
	--xxxl: 15rem;

	--text-xxs: max(10rem, 10px);
	--text-xs: max(1.2rem, 12px);
	--text-sm: max(1.4rem, 14px);
	--text-md: max(1.8rem, 18px);
	--text-lg: 2.4rem;
	--text-xl: 3rem;
	--text-xxl: 6rem;
	--text-xxxl: 10rem;

	--text-thin: 300;
	--text-normal: 400;
	--text-medium: 600;
	--text-bold: 800;

	--column-xxs: 10rem;
	--column-xs: 20rem;
	--column-sm: 30rem;
	--column-md: 40rem;
	--column-lg: 60rem;
	--column-xl: 90rem;
	--column-xxl: 120rem;

	--interactive-border-radius: var(--xs);
	--interactive-min-height: 4.4rem;

	--line-height: 1.5;
	--line-height-sm: 1.16;

	--screen-width-xs: 600px;

	--transition: 0.25s;
	--transition-slow: 0.5s;
	--transition-quick: 0.125s;
	
	font-size: 62.5%;
	color: var(--col-text);
	background-color: var(--col-background);
	font-family: sans-serif;
	padding: var(--xl);
	min-height: 100vh;
	line-height: var(--line-height);
	accent-color: var(--col-interactive);	
	-webkit-tap-highlight-color: transparent;

	@media (width < 800px) {
		/* --text-lg: 2rem;
		--text-xl: 2.4rem;
		--text-xxl: 4rem; */
		font-size: 54.68%;
		padding: var(--lg);
	}

	@media (width < 500px) {
		font-size: 46.87%;
		padding: var(--md);
	}
}

body {
	font-family: "Poppins", sans-serif;
	font-size: var(--text-md);
}

.h1 {
	font-size: var(--text-xxl);
	color: color-mix(in srgb, var(--col-primary) 40%, var(--col-text));
}

.h2 {
	font-size: var(--text-xl);
}

.h3 {
	font-size: var(--text-lg);
}

.h1, .h2 {
	font-weight: var(--text-bold);
}

.h3, .h4 {
	font-weight: var(--text-medium);
}

.h1, .h2, .h3, .h4, .h5, .h6 {
	line-height: var(--line-height-sm);
}

.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}

.text-truncate {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	word-break: break-word;
	-webkit-line-clamp: 1;
}
.text-truncate--2 {
	-webkit-line-clamp: 2;
}
.text-truncate--3 {
	-webkit-line-clamp: 3;
}

a {
	color: unset;
	text-decoration: unset;
	outline-offset: 0;
}

.flex {
	display: flex;
	gap: var(--md);
}
.flex--wrap {
	flex-wrap: wrap;
}
.flex--row {
	flex-direction: row;
}
.flex--column {
	flex-direction: column;
}


.gap-0 {
	gap: 0;
}
.gap-xxs {
	gap: var(--xxs);
}
.gap-xs {
	gap: var(--xs);
}
.gap-sm {
	gap: var(--sm);
}
.gap-md {
	gap: var(--md);
}
.gap-lg {
	gap: var(--lg);
}
.gap-xl {
	gap: var(--xl);
}
.gap-xxl {
	gap: var(--xxl);
}

.justify-start {
	justify-content: start;
}
.justify-center {
	justify-content: center;
}
.justify-end {
	justify-content: end;
}
.justify-around {
	justify-content: space-around;
}
.justify-between {
	justify-content: space-between;
}
.justify-evenly {
	justify-content: space-evenly;
}
.justify-end {
	justify-content: end;
}
.align-start {
	align-items: start;
}
.align-center {
	align-items: center;
}
.align-end {
	align-items: end;
}

.main {
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	width: fit-content;
}
.main--full {
	width: 100%;
	max-width: 120rem;
}