@import url('https://fonts.bunny.net/css?family=source-sans-pro:400,600,700&display=swap');


@import "tailwindcss";

@theme {
	--color-primary-50: #e7ebf0;
	--color-primary-100: #ced7e1;
	--color-primary-200: #9dadc3;
	--color-primary-300: #6c85a5;
	--color-primary-400: #3b5d87;
	--color-primary-500: #0B1F3A;
	--color-primary-600: #0a1c35;
	--color-primary-700: #08162a;
	--color-primary-800: #06111f;
	--color-primary-900: #040b15;
	--color-primary: #0B1F3A;

	--font-sans: "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@layer base {

	html,
	body {
		font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
		font-size: 16px;
		line-height: 1.6;
	}

	:root {
		--color-primary: #0B1F3A;
	}

	@keyframes slideDown {
		from {
			transform: translateY(-100%);
			opacity: 0;
		}

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

	@keyframes bounceRight {

		0%,
		100% {
			transform: translateX(0);
			animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
		}

		50% {
			transform: translateX(25%);
			animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
		}
	}

	.animate-slide-down {
		animation: slideDown 0.5s ease-in-out forwards;
	}

	.animate-bounce-right {
		animation: bounceRight 1s infinite;
	}

	/* Hide scrollbar for Chrome, Safari and Opera */
	.no-scrollbar::-webkit-scrollbar {
		display: none;
	}

	/* Hide scrollbar for IE, Edge and Firefox */
	.no-scrollbar {
		-ms-overflow-style: none;
		/* IE and Edge */
		scrollbar-width: none;
		/* Firefox */
	}
}

@layer components {
	.ds-container {
		@apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
	}

	.ds-page {
		@apply bg-gray-50 text-gray-900;
	}

	.ds-section {
		@apply py-8 sm:py-10 lg:py-12;
	}

	.ds-stack-sm {
		@apply space-y-3;
	}

	.ds-stack-md {
		@apply space-y-5;
	}

	.ds-stack-lg {
		@apply space-y-8;
	}

	.ds-h1 {
		@apply text-2xl sm:text-3xl lg:text-3xl font-bold tracking-tight text-primary-700;
	}

	.ds-h2 {
		@apply text-xl sm:text-2xl lg:text-2xl font-semibold tracking-tight text-primary-700;
	}

	.ds-h3 {
		@apply text-lg sm:text-xl lg:text-xl font-semibold text-primary-700;
	}

	.ds-eyebrow {
		@apply text-sm font-semibold uppercase tracking-wide;
	}

	.ds-body {
		@apply text-base leading-7 text-slate-700;
	}

	.ds-meta {
		@apply text-sm text-slate-500;
	}

	.ds-card {
		@apply rounded-lg border border-gray-200 bg-white shadow-sm;
	}

	.ds-card-body {
		@apply p-4 sm:p-5;
	}
}

@layer utilities {
	@media (min-width: 1024px) {
		.text-xs {
			font-size: 0.875rem;
			line-height: 1.25rem;
		}

		.text-sm {
			font-size: 0.9375rem;
			line-height: 1.375rem;
		}

		.text-base {
			font-size: 1rem;
			line-height: 1.6rem;
		}

		.text-lg {
			font-size: 1.125rem;
			line-height: 1.75rem;
		}

		.text-xl {
			font-size: 1.25rem;
			line-height: 1.9rem;
		}

		.text-2xl {
			font-size: 1.5rem;
			line-height: 2.1rem;
		}

		.text-3xl {
			font-size: 1.75rem;
			line-height: 2.3rem;
		}

		.text-4xl {
			font-size: 2rem;
			line-height: 2.5rem;
		}
	}
}