/* Universal Box Sizing Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* HTML Base Styles */
html {
	width: 100%;
	height: 100%;
	-webkit-text-size-adjust: 100%;
}

/* Shared HTML and Body Styles */
html,
body {
	overscroll-behavior: none;
}

/* Body Base Styles */
body {
	font-family: var(--font-family-base), sans-serif;
	font-size: var(--font-size-base);
	color: var(--color-grey-950);
	background-color: var(--color-white);
	margin: 0;
	min-height: 100%;
	touch-action: manipulation;
}

*:focus {
	outline: none;
}

*:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

@media (hover: none) and (pointer: coarse) {
	*:focus-visible {
		outline: none;
	}

	* {
		-webkit-tap-highlight-color: transparent;
	}
}

/* Navigation area */
.navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0rem;
	width: 100%;
	min-height: 60px;
}

.navigation.right {
	justify-content: flex-end;
}
.navigation.left {
	justify-content: start;
}

.navigation-btn {
	background: none;
	border: none;

	cursor: pointer;
	padding: 0 6px;
	line-height: 1;
	border-radius: 4px;
	transition: background 0.2s;

	display: flex;
	align-items: start;
}

/* .navigation-btn {
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
} */

.navigation-btn > svg {
	font-size: 1.5rem;
}

.navigation-btn-right {
	justify-content: flex-end;
}

.notification-btn:hover {
	background: #eee;
	color: #222;
}

.navigation-title {
	font-weight: 600;
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	line-height: 23px;
	flex: 1;
	text-align: center;

	display: flex;
	justify-content: center;

	color: var(--color-primary-1000);
}

span.navigation-placeholder {
	width: 24px;
	height: 24px;
}

.dark-svg {
	color: var(--color-grey-800);
}

.white-svg {
	color: var(--color-white);
}

/* .white-svg svg,
.white-svg path {
	fill: var(--color-white);
	color: var(--color-white);
} */

.gray-svg {
	color: var(--color-grey-200);
}

/* .gray-svg svg,
.gray-svg path {
	fill: var(--color-grey-200);
	color: var(--color-grey-200);
} */

/* Onboarding-specific icon colors (avoid collision with other icons) */
.onboarding-icon-white {
	color: var(--color-white);
}

.onboarding-icon-white svg,
.onboarding-icon-white path {
	fill: var(--color-white);
	color: var(--color-white);
}

.onboarding-icon-gray {
	color: var(--color-grey-200);
}

.onboarding-icon-gray svg,
.onboarding-icon-gray path {
	fill: var(--color-grey-200);
	color: var(--color-grey-200);
}