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

@layer base {
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;
	}

	.bn-swap-wrap {
		-webkit-font-smoothing: antialiased;

		/* Color Variables */
		--bn-grey-50: 249 250 251; /* #F9FAFB */
		--bn-grey-100: 232 233 234; /* #E8E9EA */
		--bn-grey-200: 190 191 192; /* #BEBFC0 */
		--bn-grey-500: 55 58 62; /* #373A3E */
		--bn-grey-600: 38 40 43; /* #26282B */
		--bn-grey-700: 31 32 35; /* #1F2023 */
		--bn-grey-800: 26 28 30; /*#1A1C1E */
		--bn-grey-900: 22 23 24; /*#161718*/
		--bn-yellow-200: 255 214 152; /* #FFD698 */
		--bn-yellow-300: 255 192 97; /* #FFC061 */
		--bn-yellow-400: 253 184 80; /* #FDB850 */
		--bn-yellow-900: 38 36 32; /* #262420 */
		--bn-violet-400: 174 159 249; /* #AE9FF9 */
		--bn-violet-900: 249 250 251; /*#F9FAFB*/
		--bn-orange-300: 255 152 117; /*#FF9875 */
		--bn-orange-900: 54 33 26; /* #36211A */
		--bn-green-200: 138 232 182; /* #8AE8B6 */
		--bn-green-900: 23 43 34; /* #172B22 */
		--bn-font-primary: "Bricolage", system-ui, sans-serif;
		--bn-font-secondary: "Aeonik", system-ui, sans-serif;

		/* text colors */
		--bn-text-primary: var(--bn-grey-50);
		--bn-text-secondary: var(--bn-grey-200);
		--bn-text-button: var(--bn-grey-700);
		--bn-text-accent-1: var(--bn-yellow-200);
		--bn-text-accent-2: var(--bn-violet-400);
		--bn-text-accent-3: var(--bn-green-200); /* success */
		--bn-text-accent-4: var(--bn-orange-300); /* error */
		--bn-text-theme: var(--bn-yellow-400);

		/* bg colors */
		--bn-bg-layer-1: var(--bn-grey-900);
		--bn-bg-layer-2: var(--bn-grey-700);
		--bn-bg-layer-3: var(--bn-grey-600);
		--bn-bg-accent-1: var(--bn-yellow-900); /* theme */
		--bn-bg-accent-3: var(--bn-green-900); /* success */
		--bn-bg-accent-4: var(--bn-orange-900); /* error */

		/* border color */
		--bn-border-strong: var(--bn-grey-500);
		--bn-border-theme: var(--bn-text-theme);
		--bn-border-subtle: var(--bn-grey-600);

		--bn-icon: 249 250 251; /*#F9FAFB*/
		--bn-accentBg2: 35 35 46; /*#23232E*/
		--bn-font-primary: "Bricolage", system-ui, sans-serif;
		--bn-font-secondary: "Aeonik", system-ui, sans-serif;
	}

	.bn-swap-wrap ::-webkit-outer-spin-button,
	.bn-swap-wrap input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	.bn-no-scrollbar::-webkit-scrollbar {
		display: none;
	}

	/* Firefox */
	.bn-swap-wrap [type="number"] {
		-moz-appearance: textfield;
	}

	.bn-swap-wrap input,
	.bn-swap-wrap button {
		outline: none;
	}

	.bn-swap-wrap * {
		box-sizing: border-box;
		font-family: var(--bn-font-primary);
	}

	.bn-aeonik-font {
		font-family: var(--bn-font-secondary);
	}

	.bn-aeonik-font * {
		font-family: var(--bn-font-secondary);
	}
	.bn-swap-wrap .material-symbols-rounded {
		font-family: "Material Symbols Rounded", sans-serif;
		font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
		font-weight: normal;
		font-style: normal;
		line-height: 1;
		letter-spacing: normal;
		text-transform: none;
		display: inline-block;
		white-space: nowrap;
		word-wrap: normal;
		direction: ltr;
		-webkit-font-feature-settings: "liga";
		-webkit-font-smoothing: antialiased;
	}

	/* @note: scrollbar is not customizable */
	/* Target the scrollbar itself */
	.bn-swap-wrap ::-webkit-scrollbar {
		width: 10px;
		height: 10px;
		background-color: #18191b;
	}

	/* Style the track (the background) */
	.bn-swap-wrap ::-webkit-scrollbar-track {
		background: #18191b;
	}

	/* Style the thumb (the draggable handle) */
	.bn-swap-wrap ::-webkit-scrollbar-thumb {
		background-color: #242629;
		width: 4px;
		border-radius: 4px;
	}
}

@font-face {
	font-family: "Material Symbols Rounded";
	font-style: normal;
	font-weight: 400;
	src: url(../assets/fonts/material-icons-filled.woff2) format("woff2");
}

@layer utilities {
	input:-webkit-autofill {
		box-shadow: 0 0 0px 1000px transparent inset !important;
		-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
		-webkit-text-fill-color: white !important;
		color: white !important;
		transition: background-color 9999s ease-in-out 0s !important;
	}
}
