:root {
	--primary: #e8ac42;
	--primary-400: #fac364;
	--secondary-01: #1d2433;
	--secondary-02: #ed9936;
	--secondary-03: #a59379;
	--secondary-03-op6: rgba(165, 147, 121, 0.6);
	--secondary-03-300: #d7c09f;
	--warning: #e5ba49;
	--success: #21bfac;
	--sidebar-button: rgba(50, 68, 96, 0.6);
	--sidebar-button-hover: rgba(50, 68, 96, 1);

	--bgc: #0e1018;
	--bgc2: rgba(29, 34, 50, 0.3);
	--bgc3: rgba(39, 45, 68, 0.6);
	--kv-bgc: #1b243400;
	--footer: rgba(38, 42, 51, 0.4);
	--text: #e4e6ed;
	--text2: rgba(228, 230, 237, 0.8);
	--text-linear: #eae3cc;
	--text-tag: #4a6cc1;

	--border: rgba(43, 50, 75, 0.6);
	--highlight: #e6b979;
	--highlight2: #9ccfeb;
	--circle-bgc1: #192056;
	--circle-bgc2: #252e74;
	--card-bgc: rgba(37, 43, 63, 0.4);
	--card-bgc-liner: rgba(74, 108, 193, 0.12);
	--card-border-radius: 20px;
	--card-shadow: 4px 4px 12px rgba(8, 10, 19, 0.06);
	--shadow-1: 2px 2px 8px rgba(10, 12, 23, 0.12);
	--shadow-2: 6px 9px 7px rgba(26, 36, 48, 0.2);
	--shadow-3: 2px 2px 12px rgba(0, 0, 0, 0.12);
	--shadow-4: 4px 4px 20px rgba(0, 0, 0, 0.16);
	--section-padding-y: 100px;
	--section-padding-y2: 60px;
	--section-padding-x: 20px;
	--h1: 76px;
	--h2: 52px;
	--h3: 36px;
	--h4: 28px;
	--h5: 22px;
	--h6: 18px;
	--p: 16px;
	--title-liner: linear-gradient(90deg, rgba(246, 175, 75, 0.1), rgba(249, 163, 43, 0));
}
.light-mode {
	--secondary-03-300: #6d5d43;
	--warning: #e5ba49;
	--success: #1b9fa1;
	--sidebar-button: rgba(255, 255, 255, 0.6);
	--sidebar-button-hover: rgb(254, 254, 254);
	--bgc: #f1f7f7;
	--bgc2: rgb(255, 255, 255, 0.8);
	--bgc3: rgba(255, 255, 255, 1);
	--kv-bgc: rgba(153, 177, 182, 0);
	--footer: rgb(63 70 85);
	--text: rgb(16, 22, 39);
	--text2: rgba(17, 18, 20, 0.8);
	--text-tag: #7f9ed5;
	--title-liner: linear-gradient(90deg, rgba(75, 218, 246, 0.3), rgba(43, 204, 249, 0.05));
	--card-shadow: 4px 4px 16px rgba(35, 39, 45, 0.08);
	--shadow-1: 2px 2px 12px rgba(81, 82, 87, 0.12);
	--shadow-2: 2px 2px 12px rgba(61, 64, 69, 0.2);
	--shadow-3: 2px 2px 12px rgba(48, 50, 56, 0.12);
	--shadow-4: 2px 4px 16px rgba(30, 33, 40, 0.16);

	--text-linear: #1f1908;
	--border: rgba(130, 134, 149, 0.4);
	--highlight: rgb(191, 141, 71);
	--highlight2: #194069;
	--card-bgc: rgba(255, 255, 255, 0.9);
	--card-bgc-liner: rgba(255, 255, 255, 0.1);
	--card-shadow: 2px 2px 14px rgba(53, 54, 59, 0.08);
	--circle-bgc1: rgba(198, 245, 254, 0.8);
	--circle-bgc2: rgba(184, 229, 240, 0.5);
}
@media (min-width: 1439.99px) {
	:root {
		--section-padding-x: 30px;
		--h1: 84px;
		--h2: 64px;
		--h3: 40px;
		--h4: 32px;
		--h5: 24px;
	}
}

@media (max-width: 767.98px) {
	:root {
		--section-padding-y: 48px;
		--section-padding-y2: 36px;
		--section-padding-x: 12px;
		--card-border-radius: 16px;
		--h1: 48px;
		--h2: 30px;
		--h3: 26px;
		--h4: 22px;
		--h5: 18px;
		--h6: 16px;
		--p: 14px;
	}
}

/* width */
::-webkit-scrollbar {
	width: 10px;
	height: 8px;
}

::-webkit-scrollbar-button {
	background: transparent;
	border-radius: 4px;
}

/* 滑動區域底色 Track 設定長度*/

.anchor-body::-webkit-scrollbar-track {
	margin: 20px 0;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: rgba(136, 136, 136, 0.16);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding-top: 20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: rgba(136, 136, 136, 0.4);
}

/* Handle */
.light-mode::-webkit-scrollbar-thumb,
.light-mode ::-webkit-scrollbar-thumb {
	background: rgba(106, 137, 153, 0.3);
	border: none;
}

/* Handle on hover */
.light-mode::-webkit-scrollbar-thumb:hover,
.light-mode ::-webkit-scrollbar-thumb:hover {
	background: rgba(115, 128, 135, 0.5);
}