@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
	--radius: 0.5rem;

	--background: oklch(100% 0 0);
	--foreground: oklch(13.71% 0.036 258.53);

	--card: oklch(100% 0 0);
	--card-foreground: oklch(13.71% 0.036 258.53);

	--popover: oklch(100% 0 0);
	--popover-foreground: oklch(13.71% 0.036 258.53);

	--primary: oklch(20.79% 0.0399 265.73);
	--primary-foreground: oklch(98.38% 0.0035 247.86);

	--secondary: oklch(86.48% 0.0153 248);
	--secondary-foreground: oklch(20.79% 0.0399 265.73);

	--muted: oklch(94.32% 0.0123 247.96);
	--muted-foreground: oklch(40.68% 0.0281 257.44);

	--accent: oklch(91.87% 0.01770618193703561 248.02064625050508);
	--accent-foreground: oklch(20.79% 0.0399 265.73);

	--border: oklch(92.9% 0.0126 255.53);
	--input: oklch(92.56% 0.0133 255.54);
	--input-invalid: oklch(63.68% 0.2078 25.33);

	--destructive: oklch(57.14% 0.2121 27.25);
	--destructive-foreground: oklch(98.38% 0.0035 247.86);
	/* prefixed with foreground because it should look good on the background */
	--foreground-destructive: oklch(51.46% 0.1979 16.57);

	--ring: oklch(71.07% 0.0351 256.79);
}

.dark {
	--background: oklch(13.71% 0.036 258.53);
	--foreground: oklch(98.38% 0.0035 247.86);

	--card: oklch(13.71% 0.036 258.53);
	--card-foreground: oklch(98.38% 0.0035 247.86);

	--popover: oklch(13.71% 0.036 258.53);
	--popover-foreground: oklch(98.38% 0.0035 247.86);

	--primary: oklch(98.38% 0.0035 247.86);
	--primary-foreground: oklch(20.79% 0.0399 265.73);

	--secondary: oklch(34.74% 0.0295 260.13);
	--secondary-foreground: oklch(98.38% 0.0035 247.86);

	--muted: oklch(22.6% 0.0267 260.02);
	--muted-foreground: oklch(71.07% 0.0351 256.79);

	--accent: oklch(20.56% 0.022816 260.0464);
	--accent-foreground: oklch(98.38% 0.0035 247.86);

	--border: oklch(28% 0.0369 259.97);
	--input: oklch(28% 0.0369 259.97);
	--input-invalid: oklch(39.59% 0.1331 25.72);

	--destructive: oklch(47.6% 0.159 25.64);
	--destructive-foreground: oklch(97.1% 0.0127 17.38);
	/* prefixed with foreground because it should look good on the background */
	--foreground-destructive: oklch(63.72% 0.2071 21.89);

	--ring: oklch(65.28% 0.0684 260.07);
}

@theme inline {
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);
	--color-background: var(--background);
	--color-foreground: var(--foreground);
	--color-card: var(--card);
	--color-card-foreground: var(--card-foreground);
	--color-popover: var(--popover);
	--color-popover-foreground: var(--popover-foreground);
	--color-primary: var(--primary);
	--color-primary-foreground: var(--primary-foreground);
	--color-secondary: var(--secondary);
	--color-secondary-foreground: var(--secondary-foreground);
	--color-muted: var(--muted);
	--color-muted-foreground: var(--muted-foreground);
	--color-accent: var(--accent);
	--color-accent-foreground: var(--accent-foreground);
	--color-destructive: var(--destructive);
	--color-border: var(--border);
	--color-input: var(--input);
	--color-ring: var(--ring);
	--color-input-invalid: var(--input-invalid);
	--color-destructive-foreground: var(--destructive-foreground);
	--color-foreground-destructive: var(--foreground-destructive);
}

@theme {
	--text-mega: 5rem;
	--text-mega--line-height: 5.25rem;
	--text-mega--font-weight: 700;
	--text-h1: 3.5rem;
	--text-h1--line-height: 3.875rem;
	--text-h1--font-weight: 700;
	--text-h2: 2.5rem;
	--text-h2--line-height: 3rem;
	--text-h2--font-weight: 700;
	--text-h3: 2rem;
	--text-h3--line-height: 2.25rem;
	--text-h3--font-weight: 700;
	--text-h4: 1.75rem;
	--text-h4--line-height: 2.25rem;
	--text-h4--font-weight: 700;
	--text-h5: 1.5rem;
	--text-h5--line-height: 2rem;
	--text-h5--font-weight: 700;
	--text-h6: 1rem;
	--text-h6--line-height: 1.25rem;
	--text-h6--font-weight: 700;
	--text-body-2xl: 2rem;
	--text-body-2xl--line-height: 2.25rem;
	--text-body-xl: 1.75rem;
	--text-body-xl--line-height: 2.25rem;
	--text-body-lg: 1.5rem;
	--text-body-lg--line-height: 2rem;
	--text-body-md: 1.25rem;
	--text-body-md--line-height: 1.75rem;
	--text-body-sm: 1rem;
	--text-body-sm--line-height: 1.25rem;
	--text-body-xs: 0.875rem;
	--text-body-xs--line-height: 1.125rem;
	--text-body-2xs: 0.75rem;
	--text-body-2xs--line-height: 1rem;
	--text-caption: 1.125rem;
	--text-caption--line-height: 1.5rem;
	--text-caption--font-weight: 600;
	--text-button: 0.75rem;
	--text-button--line-height: 1rem;
	--text-button--font-weight: 700;
	--animate-roll-reveal: roll-reveal 0.4s cubic-bezier(0.22, 1.28, 0.54, 0.99);
	--animate-slide-left: slide-left 0.3s ease-out;
	--animate-slide-top: slide-top 0.3s ease-out;
	--animate-caret-blink: caret-blink 1.25s ease-out infinite;

	@keyframes roll-reveal {
		from {
			transform: rotate(12deg) scale(0);
			opacity: 0;
		}

		to {
			transform: rotate(0deg) scale(1);
			opacity: 1;
		}
	}

	@keyframes slide-left {
		from {
			transform: translateX(20px);
			opacity: 0;
		}

		to {
			transform: translateX(0px);
			opacity: 1;
		}
	}

	@keyframes slide-top {
		from {
			transform: translateY(20px);
			opacity: 0;
		}

		to {
			transform: translateY(0px);
			opacity: 1;
		}
	}

	@keyframes caret-blink {
		0%,
		70%,
		100% {
			opacity: 1;
		}

		20%,
		50% {
			opacity: 0;
		}
	}
}

@utility container {
	margin-inline: auto;
	padding-inline: 2rem;

	@media (width >=1400px) {
		& {
			max-width: 1400px;
		}
	}
}

@layer base {
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		border-color: hsl(var(--border));
	}
}
