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

:root {
	--foundation-dark-orange-darker-active: #541f0c;
	--foundation-dark-orange-light-active: #faccba;
	--table-bottom-border-bg-light: #cccccc;
	--card-icon-color-light-bg: #eaeced;
	--background-start-rgb: 214, 219, 220;
	--background-end-rgb: 255, 255, 255;
	--foundation-dark-orange: #0f9a49;
	--job-awarded-text-color: #175cd3;
	--login-screen-text-color: #fbfbfb;
	--job-closed-text-color: #b42318;
	--contract-border-color: #feecd9;
	--contract-text-color: #c76800;
	--job-awarded-bg-color: #eff8ff;
	--attachment-border: #f1eae4;
	--job-closed-bg-color: #fef3f2;
	--table-border-color: #eaecf0;
	--filter-stroke-color: #344054;
	--applicant-color: #f9f5ff;
	--applicant-colorText: #6941c6;
	--hover-bg-color-btn: #e7f5ed;
	--search-icon-color: #667085;
	--delete-btn-color: #fef2f2;
	--table-bg-color: #f9fafb;
	--table-title-color: #101828;
	--gray-border: #d1d5db;
	--dots-color: #98a2b3;
	--time-color: #717171;
	--navy: #475467;
	--chooseFileIconBgColor: #1b2b41b0;
	--table-record-hover-bg: #595959;
	--new-applicant-color: #fffaeb;
	--new-applicant-text-color: #b54708;
	--chooseFileTextColor: #1b2b41b0;
	--chooseFileBgColor: #193b670d;
	--checkMarkColor: #005fdb;
	--scrollbar-path-color: #bfbfbf;
	--small-card-bg-light: #fafafa;
	--green-table-light: #219653;
	--checkboxColor: #1c375a29;
	--info-trend-color: #c9ffc8;
	--red-table-light: #eb5757;
	--small-card-bg: #353535;
	--body-bg-light: #e5e5e5;
	--accent-light: #f5fbf8;
	--normal-hover: #4d4d4d;
	--border-color: #3a3a3a;
	--accent-color: #0f9a49;
	--tab-color: #131313;
	--dark-green: #024900;
	--some-gray: #4d4d4d;
	--foundation: #e5e5e5;
	--foreground-rgb: 0, 0, 0;
	--error-bg: #feb6b6;
	--red-error: #430000;
	--sidebar-bg: #1a1a1a;
	--body-bg: #222222;
	--deep-purple: #6b21a8;
	--tick-color: #15803d;
	--light-purple: #f3e8ff;

	--btn-orange: #e88b35;
	--dark-orange: #985211;
	--tag-color: #e7f5ed80;
	--name-color: #333333;

	--fongreen-normal: #0c7b3a;

	--body-text-gray-500: #6b7280;
	--gray-body-text: #4b5563;
	--navy-tab-color: #1b2b41b0;
	--title-text-color: #192434;
	--border-color: #d0d5dd;
	--green-text: #0c5221;
	--brown-border: #906b4c;
	--brown-text: #4e3928;
	/*Variable from Shad Cn */
	--background: 0 0% 100%;
	--foreground: 222.2 47.4% 11.2%;

	--muted: 210 40% 96.1%;
	--muted-foreground: 215.4 16.3% 46.9%;

	--popover: 0 0% 100%;
	--popover-foreground: 222.2 47.4% 11.2%;

	--border: 214.3 31.8% 91.4%;
	--input: 214.3 31.8% 91.4%;

	--card: 0 0% 100%;
	--card-foreground: 222.2 47.4% 11.2%;

	--primary: 222.2 47.4% 11.2%;
	--primary-foreground: 210 40% 98%;

	--secondary: 210 40% 96.1%;
	--secondary-foreground: 222.2 47.4% 11.2%;

	--accent: 210 40% 96.1%;
	--accent-foreground: 222.2 47.4% 11.2%;

	--destructive: 0 100% 50%;
	--destructive-foreground: 210 40% 98%;

	--ring: 215 20.2% 65.1%;

	--radius: 0.5rem;

	/* light mode  */
	--light-mode-sidebar-bg: #ffffff;
}

@layer base {
	:root {
		--background: 0 0% 100%;
		--foreground: 222.2 47.4% 11.2%;

		--muted: 210 40% 96.1%;
		--muted-foreground: 215.4 16.3% 46.9%;

		--popover: 0 0% 100%;
		--popover-foreground: 222.2 47.4% 11.2%;

		--border: 214.3 31.8% 91.4%;
		--input: 214.3 31.8% 91.4%;

		--card: 0 0% 100%;
		--card-foreground: 222.2 47.4% 11.2%;

		--primary: 222.2 47.4% 11.2%;
		--primary-foreground: 210 40% 98%;

		--secondary: 210 40% 96.1%;
		--secondary-foreground: 222.2 47.4% 11.2%;

		--accent: 210 40% 96.1%;
		--accent-foreground: 222.2 47.4% 11.2%;

		--destructive: 0 100% 50%;
		--destructive-foreground: 210 40% 98%;

		--ring: 215 20.2% 65.1%;

		--radius: 0.5rem;
	}

	.dark {
		--background: 224 71% 4%;
		--foreground: 213 31% 91%;

		--muted: 223 47% 11%;
		--muted-foreground: 215.4 16.3% 56.9%;

		--accent: 216 34% 17%;
		--accent-foreground: 210 40% 98%;

		--popover: 224 71% 4%;
		--popover-foreground: 215 20.2% 65.1%;

		--border: 216 34% 17%;
		--input: 216 34% 17%;

		--card: 224 71% 4%;
		--card-foreground: 213 31% 91%;

		--primary: 210 40% 98%;
		--primary-foreground: 222.2 47.4% 1.2%;

		--secondary: 222.2 47.4% 11.2%;
		--secondary-foreground: 210 40% 98%;

		--destructive: 0 63% 31%;
		--destructive-foreground: 210 40% 98%;

		--ring: 216 34% 17%;

		--radius: 0.5rem;
	}
}

@layer base {
	* {
		@apply border-border;
	}

	body {
		@apply bg-background text-foreground;
		font-feature-settings: 'rlig' 1, 'calt' 1;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--foreground-rgb: 255, 255, 255;
		--background-start-rgb: 0, 0, 0;
		--background-end-rgb: 0, 0, 0;
	}
}

@media (prefers-color-scheme: light) {
	:root {
		--foreground-rgb: 255, 255, 255;
		--background-start-rgb: 0, 0, 0;
		--background-end-rgb: 0, 0, 0;
	}
}

* {
	transition: background-color 500ms;
	scroll-behavior: smooth;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	color: rgb(var(--foreground-rgb));
	background: linear-gradient(
			to bottom,
			transparent,
			rgb(var(--background-end-rgb))
		)
		rgb(var(--background-start-rgb));
}

/* remove spinners in input boxes  */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
/* input[type='number'] {
	-moz-appearance: textfield;
} */

::-webkit-scrollbar-thumb {
	background-color: var(--gray-body-text);
	border-radius: 20px;
}

::-webkit-scrollbar {
	background-color: var(--scrollbar-path-color);
	border-radius: 20px;
	width: 5px;
}