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

@layer base {
	:root {
		font-family:
			"Noto Sans", sans-serif, Inter, system-ui, Avenir, Helvetica, Arial,
			sans-serif;
		line-height: 1.5;
		font-weight: 400;
		font-size: 13px;

		color-scheme: light dark;
		color: #111113;
		background-color: #ffffff;

		font-synthesis: none;
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		-webkit-text-size-adjust: 100%;

		--size-20: 20px;
		--size-24: 24px;
		--size-32: 32px;
	}

	@font-face {
		font-family: "ConduitITCStd";
		src: url("/fonts/ConduitITCStd ExtraBold.woff2") format("woff2");
		font-weight: 800;
	}
	@font-face {
		font-family: "ConduitITCStd";
		src: url("/fonts/ConduitITCStd Bold.woff2") format("woff2");
		font-weight: 700;
	}
	@font-face {
		font-family: "ConduitITCStd";
		src: url("/fonts/ConduitITCStd-Regular.woff2") format("woff2");
		font-weight: 400;
	}

	* {
		box-sizing: border-box;
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}

	a {
		font-weight: 500;
		color: #646cff;
		text-decoration: inherit;
	}
	a:hover {
		color: #535bf2;
	}

	body {
		margin: 0;
		min-height: 100vh;
	}

	h1 {
		font-size: 3.2em;
		line-height: 1.1;
	}

	button,
	.button {
		display: flex;
		align-items: center;
		background-color: #f0f0f0;
		color: #111113;
		border-radius: 8px;
		border: 2px solid #999;
		padding: 0.6em 1.2em;
		font-size: 1em;
		font-weight: 500;
		font-family: inherit;
		cursor: pointer;
		transition: border-color 0.25s;
	}
	button:hover,
	.button:hover {
		border-color: var(--primary-color);
		background-color: var(--primary-color-transparent);
	}
	button:focus,
	button:focus-visible,
	.button:focus,
	.button:focus-visible {
		outline: 4px auto -webkit-focus-ring-color;
	}

	.body {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: var(--size-24) var(--size-20);
		max-width: 1150px;
		margin-left: auto;
		margin-right: auto;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px var(--size-20);
		background-color: var(--primary-color);
		width: 100%;
		color: #fff;
		font-size: 1.7em;
		font-weight: 800;
	}

	.subheader {
		font-size: 1rem;
		font-weight: 600;
	}

	.rosterUpload {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 8px 24px;
		width: 100%;
		height: 450px;
		border: 10px solid #999;
		border-radius: 16px;
		font-weight: bold;
		font-size: 1.5rem;
		text-transform: uppercase;
		cursor: pointer;
		transition:
			color 0.25s,
			border 0.25s,
			font-size 0.25s,
			background-color 0.25s;
	}

	.rosterUpload:hover {
		border-color: var(--primary-color);
		background-color: var(--primary-color-transparent);
		font-size: 2rem;
	}

	.rosterUploaded,
	.rosterUploaded:hover {
		height: auto;
		border-width: 2px;
		font-size: 1rem;
		border-radius: 8px;
	}

	.weapons-table th {
		font-size: 1.1em;
		padding: 2px 0.4rem;
		height: 27px;
		font-weight: 600;
	}

	.weapons-table td {
		padding: 1px 0.4rem;
		border-top: 1px dotted #9e9fa1;
		text-align: center;
	}

	.noBorderTop td {
		border-top: none;
	}

	.emptyRow {
		height: 22.5px;
	}

	.rowOtherColor {
		background-color: #c4c4c480;
	}

	.avoid-page-break {
		position: relative;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.page-break:not(.print-display-none) {
		page-break-after: page;
		break-after: page;
	}

	@media print {
		.print-display-none,
		.print-display-none * {
			display: none !important;
		}

		#root {
			min-width: 1000px;
		}

		.body {
			padding: 0;
			display: block;
			max-width: none;
		}
	}

	@media screen and (max-width: 800px) {
		:root {
			font-size: 11px;
			--size-20: 8px;
			--size-24: 12px;
			--size-32: 16px;
		}
	}

	@media screen and (max-width: 640px) {
		:root {
			font-size: 9px;
			line-height: 1.3;
			--size-20: 8px;
			--size-24: 12px;
			--size-32: 16px;
		}

		.body {
			padding-left: 0;
			padding-right: 0;
		}

		.weapons-table th {
			font-size: 0.9em;
			padding: 2px 0.2rem;
		}

		.weapons-table td {
			font-size: 0.95em;
			padding: 1px 0.2rem;
		}
	}
}