web-portfolio/app/globals.css

@import 'tailwindcss';

@theme inline {
	--font-display:
		var(--font-geist-serif), ui-serif, Georgia, Cambria, 'Times New Roman',
		Times, serif;
	--font-serif:
		var(--font-geist-serif), ui-serif, Georgia, Cambria, 'Times New Roman',
		Times, serif;
	--font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
	--font-mono:
		var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, monospace;
}

@theme {
	--color-obsidian: #040807;
	--color-aurora: #34d399;
	--color-crest: #d1fae5;
	--color-ink: #f2faf6;
}

@utility container-page {
	@apply mx-auto max-w-5xl px-6;
}

@utility panel {
	@apply border border-white/12 bg-obsidian/55 backdrop-blur-md;
}

@utility btn-primary {
	@apply border border-aurora bg-aurora px-5 py-2.5 text-obsidian transition-colors hover:border-crest hover:bg-crest;
}

@utility btn-ghost {
	@apply border border-white/20 bg-obsidian/45 px-5 py-2.5 text-ink backdrop-blur-md transition-colors hover:border-aurora hover:text-aurora;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 4rem;
}

::selection {
	background: var(--color-aurora);
	color: var(--color-obsidian);
}

:focus-visible {
	outline: 1px solid var(--color-aurora);
	outline-offset: 2px;
}

@media (scripting: enabled) {
	.reveal {
		opacity: 0;
		transform: translateY(10px);
		transition:
			opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
			transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: var(--reveal-delay, 0ms);
	}

	.reveal[data-visible='true'] {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}