/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */

@tailwind utilities;
@tailwind screens;

/* tailwind is configured to prefer this font */
@font-face {
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@layer utilities {
	.focus-ring {
		@apply ring-team-current ring-offset-4 ring-offset-white transition duration-300 focus-within:outline-none focus-within:ring-2 focus-within:ring-team-current hover:ring-2 hover:ring-team-current focus:outline-none focus:ring-2 focus:ring-team-current disabled:ring-0 group-hover:ring-2 group-hover:ring-team-current group-focus:ring-2 group-focus:ring-team-current dark:ring-offset-gray-900;
	}

	.focus-ring.danger {
		@apply ring-red-500 focus-within:ring-red-500 hover:ring-red-500 focus:ring-red-500 group-hover:ring-red-500 group-focus:ring-red-500 dark:focus-within:ring-red-500 dark:hover:ring-red-500 dark:focus:ring-red-500 dark:group-hover:ring-red-500 group-focus:dark:ring-red-500;
	}

	.bg-primary {
		@apply bg-white dark:bg-gray-900;
	}

	.bg-secondary {
		@apply bg-gray-100 dark:bg-gray-800;
	}

	.bg-alt {
		@apply bg-gray-200 dark:bg-gray-700;
	}

	.bg-inverse {
		@apply bg-black dark:bg-white;
	}

	.border-primary {
		@apply border-gray-900 dark:border-white;
	}

	.border-secondary {
		@apply border-gray-200 dark:border-gray-600;
	}

	.text-primary {
		@apply text-black dark:text-white;
	}

	.text-secondary {
		@apply text-gray-500 dark:text-slate-500;
	}

	.text-inverse {
		@apply text-white dark:text-black;
	}
}
