@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* Tell Tailwind where to scan for class names (v4 way) */
@source "../../views/**/*.erb";
@source "../../helpers/**/*.rb";
@source "../../javascript/**/*.js";

@layer base {
	:root {
		--brand-primary-700: #312e81;
		--brand-primary-600: #4338ca;
		--brand-primary-500: #6366f1;
		--brand-secondary-600: #7c3aed;
		--brand-accent-500: #f59e0b;
		--brand-success-600: #059669;
		--brand-bg: #f8fafc;
		--brand-surface: #ffffff;
		--brand-text: #111827;
	}

	body {
		background-color: var(--brand-bg);
		color: var(--brand-text);
	}
}

@layer components {
	.brand-hero-gradient {
		background-image: linear-gradient(135deg,
				var(--brand-primary-700),
				var(--brand-secondary-600));
	}

	.brand-card {
		background-color: var(--brand-surface);
		border: 1px solid rgb(229 231 235);
		border-radius: 1rem;
	}

	.btn-sharp-primary {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 0.25rem;
		background-color: var(--brand-primary-600);
		color: #ffffff;
		font-weight: 600;
		transition: background-color 150ms ease;
	}

	.btn-sharp-primary:hover {
		background-color: var(--brand-primary-700);
	}

	.btn-sharp-secondary {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 0.25rem;
		border: 1px solid rgb(209 213 219);
		background-color: #ffffff;
		color: rgb(55 65 81);
		font-weight: 600;
		transition: background-color 150ms ease, color 150ms ease;
	}

	.btn-sharp-secondary:hover {
		background-color: rgb(249 250 251);
		color: rgb(31 41 55);
	}

	/* Custom Animations */
	@keyframes fade-in {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes slide-in-from-right {
		from {
			transform: translateX(2rem);
			opacity: 0;
		}

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

	.animate-in {
		animation-duration: 1000ms;
		animation-fill-mode: both;
		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	}

	.fade-in {
		animation-name: fade-in;
	}

	.slide-in-from-right-8 {
		animation-name: slide-in-from-right;
	}
}