:root {
	--background: oklch(0.1448 0 0);
	--foreground: oklch(0.9851 0 0);
	--card: oklch(0.1448 0 0);
	--card-foreground: oklch(0.9851 0 0);
	--popover: oklch(0.1448 0 0);
	--popover-foreground: oklch(0.9851 0 0);
	--primary: oklch(0.8296 0.1208 217.7892);
	--primary-foreground: oklch(0 0 0);
	--secondary: oklch(0.9021 0.2101 133.0489);
	--secondary-foreground: oklch(0 0 0);
	--muted: oklch(0.2686 0 0);
	--muted-foreground: oklch(0.7155 0 0);
	--accent: oklch(0.313 0.0502 218.1744);
	--accent-foreground: oklch(0.9851 0 0);
	--destructive: oklch(0.6368 0.2078 25.3313);
	--destructive-foreground: oklch(0.9851 0 0);
	--border: oklch(0.2686 0 0);
	--input: oklch(0.2686 0 0);
	--ring: oklch(0.8296 0.1208 217.7892);
	--chart-1: oklch(0.8296 0.1208 217.7892);
	--chart-2: oklch(0.9021 0.2101 133.0489);
	--chart-3: oklch(0.7203 0.2383 336.833);
	--chart-4: oklch(0.8954 0.1422 176.6126);
	--chart-5: oklch(0.801 0.1305 311.8296);
	--sidebar: oklch(0.2178 0 0);
	--sidebar-foreground: oklch(0.9851 0 0);
	--sidebar-primary: oklch(0.8296 0.1208 217.7892);
	--sidebar-primary-foreground: oklch(0 0 0);
	--sidebar-accent: oklch(0.313 0.0502 218.1744);
	--sidebar-accent-foreground: oklch(0.9851 0 0);
	--sidebar-border: oklch(0.2686 0 0);
	--sidebar-ring: oklch(0.8296 0.1208 217.7892);
	--font-sans: 'Plus Jakarta Sans', sans-serif;
	--font-heading: 'Satoshi', sans-serif;
	--font-mono: monospace;
	--radius: 0.5rem;
	--shadow-x: 0px;
	--shadow-y: 4px;
	--shadow-blur: 10px;
	--shadow-spread: 0px;
	--shadow-opacity: 0.5;
	--shadow-color: #000000;
	--shadow-2xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.25);
	--shadow-xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.25);
	--shadow-sm: 0px 4px 10px 0px hsl(0 0% 0% / 0.5),
		0px 1px 2px -1px hsl(0 0% 0% / 0.5);
	--shadow: 0px 4px 10px 0px hsl(0 0% 0% / 0.5),
		0px 1px 2px -1px hsl(0 0% 0% / 0.5);
	--shadow-md: 0px 4px 10px 0px hsl(0 0% 0% / 0.5),
		0px 2px 4px -1px hsl(0 0% 0% / 0.5);
	--shadow-lg: 0px 4px 10px 0px hsl(0 0% 0% / 0.5),
		0px 4px 6px -1px hsl(0 0% 0% / 0.5);
	--shadow-xl: 0px 4px 10px 0px hsl(0 0% 0% / 0.5),
		0px 8px 10px -1px hsl(0 0% 0% / 0.5);
	--shadow-2xl: 0px 4px 10px 0px hsl(0 0% 0% / 1.25);
	--tracking-normal: 0em;
	--spacing: 0.25rem;
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);
}

/* Spinner component */
.spinner {
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: spinner-spin 0.6s linear infinite;
}

@keyframes spinner-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Button loading state */
.btn[disabled] .spinner {
	opacity: 0.7;
}

.btn .btn-text {
	transition: opacity 0.15s;
}

.btn.loading .btn-text {
	opacity: 0;
	position: absolute;
}

.btn.loading {
	position: relative;
}

/* Typography - Body uses Plus Jakarta Sans, Headings use Satoshi */
body {
	font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6,
.font-heading {
	font-family: var(--font-heading);
}