@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&family=Quicksand:wght@300..700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root {
		--background: 0 0% 100%;
		--foreground: 240 10% 3.9%;
		--card: 0 0% 100%;
		--card-foreground: 240 10% 3.9%;
		--popover: 0 0% 100%;
		--popover-foreground: 240 10% 3.9%;
		--primary: 240 5.9% 10%;
		--primary-foreground: 0 0% 98%;
		--secondary: 240 4.8% 95.9%;
		--secondary-foreground: 240 5.9% 10%;
		--muted: 240 4.8% 95.9%;
		--muted-foreground: 240 3.8% 46.1%;
		--accent: 240 4.8% 95.9%;
		--accent-foreground: 240 5.9% 10%;
		--destructive: 0 84.2% 60.2%;
		--destructive-foreground: 0 0% 98%;
		--border: 240 5.9% 90%;
		--input: 240 5.9% 90%;
		--ring: 240 5.9% 10%;
		--radius: 1rem;

		--brand-primary-from: 45 100% 77%; /* #FFE29F */
		--brand-primary-to: 340 95% 68%; /* #FF719A */
		--brand-secondary-from: 24 89% 83%; /* #FEC6A1 */
		--brand-secondary-to: 351 100% 93%; /* #FFDEE2 */
		--brand-tertiary-from: 252 100% 93%; /* #E5DEFF */
		--brand-tertiary-to: 214 100% 92%; /* #D3E4FD */
		--brand-quaternary-from: 86 89% 94%; /* #F2FCE2 */
		--brand-quaternary-to: 50 100% 91%; /* #FEF7CD */
		--brand-accent: 18 85% 90%; /* #FDE1D3 */
		--brand-accent-light: 25 95% 95%; /* #FEF2ED */
	}

	.dark {
		--background: 240 10% 3.9%;
		--foreground: 0 0% 98%;
		--card: 240 10% 3.9%;
		--card-foreground: 0 0% 98%;
		--popover: 240 10% 3.9%;
		--popover-foreground: 0 0% 98%;
		--primary: 0 0% 98%;
		--primary-foreground: 240 5.9% 10%;
		--secondary: 240 3.7% 15.9%;
		--secondary-foreground: 0 0% 98%;
		--muted: 240 3.7% 15.9%;
		--muted-foreground: 240 5% 64.9%;
		--accent: 240 3.7% 15.9%;
		--accent-foreground: 0 0% 98%;
		--destructive: 0 62.8% 30.6%;
		--destructive-foreground: 0 0% 98%;
		--border: 240 3.7% 15.9%;
		--input: 240 3.7% 15.9%;
		--ring: 240 4.9% 83.9%;

		--brand-primary-from: 45 100% 77%; /* #FFE29F */
		--brand-primary-to: 340 95% 68%; /* #FF719A */
		--brand-secondary-from: 24 89% 83%; /* #FEC6A1 */
		--brand-secondary-to: 351 100% 93%; /* #FFDEE2 */
		--brand-tertiary-from: 252 100% 93%; /* #E5DEFF */
		--brand-tertiary-to: 214 100% 92%; /* #D3E4FD */
		--brand-quaternary-from: 86 89% 94%; /* #F2FCE2 */
		--brand-quaternary-to: 50 100% 91%; /* #FEF7CD */
		--brand-accent: 18 85% 90%; /* #FDE1D3 */
	}
}

@layer base {
	* {
		@apply border-border selection:bg-primary/10 selection:text-primary;
	}

	body {
		@apply bg-background text-foreground antialiased min-h-screen;
		font-feature-settings: 'ss01', 'ss02', 'cv01', 'cv02', 'cv03';
	}

	html {
		@apply scroll-smooth;
	}
}

@layer utilities {
	.scrollbar-hidden {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.scrollbar-hidden::-webkit-scrollbar {
		display: none;
	}

	.glass-morphism {
		@apply backdrop-blur-xl bg-primary/5 border border-primary/10 dark:bg-primary/10;
	}

	.text-balance {
		text-wrap: balance;
	}
}

.page-transition-container {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.page-transition-wrapper {
	opacity: 1;
}

.page-transition-wrapper.active {
	animation: page-in 0.9s ease-out forwards;
}

.page-transition-wrapper.inactive {
	animation: page-out 0.9s ease-out forwards;
}

@keyframes page-in {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes page-out {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(10px);
	}
}

/* SF Pro font import */
@font-face {
	font-family: 'SF Pro Display';
	src: url('https://fonts.cdnfonts.com/s/54649/SFPRODISPLAYREGULAR.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.font-heading {
	font-family: 'DynaPuff', system-ui;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	font-variation-settings: 'wdth' 100;
}

.glass {
	@apply bg-white/10 backdrop-blur-lg border border-white/20 rounded-2xl;
}

.glass-card {
	@apply backdrop-blur-xl bg-white/10 border border-primary/10 rounded-xl shadow-xl;
}

.glass-form {
	@apply backdrop-blur-xl bg-white/10 border border-primary/10 rounded-xl;
}

/* Light mode enhanced glassmorphism */
.light .glass-form {
	@apply bg-gradient-to-r from-brand-secondary-from/30 to-brand-tertiary-from/30 backdrop-blur-xl border border-white/30 shadow-xl;
}