:root,
html[data-theme="paper"] {
	--color-bg: #F5F0E3;
	--color-bg-soft: #F8F4EA;
	--color-surface: #FFF9EF;
	--color-surface-elevated: #FFFCF5;

	--color-text-primary: #4A3B2A;
	--color-text-secondary: #6B5A46;
	--color-text-muted: #8B7A67;
	--color-text-disabled: #B7AA98;

	--color-border: rgba(106, 83, 53, 0.16);
	--color-border-strong: rgba(106, 83, 53, 0.28);
	--color-divider: rgba(106, 83, 53, 0.12);

	--color-accent: #B3873A;
	--color-accent-hover: #9A712E;
	--color-accent-soft: rgba(179, 135, 58, 0.12);
	--color-accent-strong: #7C5A20;

	--color-success: #5E7C4D;
	--color-warning: #B07A24;
	--color-danger: #A45A4A;
	--color-info: #6C7B8A;

	--input-bg: #FFF9EF;
	--input-border: rgba(106, 83, 53, 0.18);
	--input-text: #4A3B2A;
	--input-placeholder: #9D8E7D;

	--button-primary-bg: #B3873A;
	--button-primary-text: #FFF9EF;
	--button-primary-hover: #9A712E;

	--button-secondary-bg: rgba(179, 135, 58, 0.08);
	--button-secondary-text: #7C5A20;
	--button-secondary-border: rgba(179, 135, 58, 0.18);

	--header-control-bg: rgba(255, 249, 239, 0.34);
	--header-control-hover-bg: rgba(179, 135, 58, 0.06);
	--header-control-active-bg: rgba(179, 135, 58, 0.09);
	--header-control-border: rgba(106, 83, 53, 0.16);
	--header-control-text: #6B5A46;
	--header-control-active-text: #7C5A20;

	--shadow-soft: 0 10px 30px rgba(89, 68, 41, 0.08);

	--color-bg-wash: rgba(255, 249, 239, 0.68);
	--color-focus-ring: rgba(179, 135, 58, 0.52);
	--color-coin-shadow: rgba(89, 68, 41, 0.14);
	--color-scrim: rgba(74, 59, 42, 0.38);
	--color-primary-detail: rgba(255, 249, 239, 0.72);
	--color-disabled-bg: rgba(106, 83, 53, 0.14);

	--radius: 2px;
	--font-sans:
		-apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
		"Microsoft YaHei", sans-serif;
	--font-serif: "Songti SC", "STSong", "SimSun", serif;
}

html[data-theme="night"] {
	--color-bg: #1E1A17;
	--color-bg-soft: #26211D;
	--color-surface: #2C2621;
	--color-surface-elevated: #332C26;

	--color-text-primary: #E8D9BC;
	--color-text-secondary: #C7B79B;
	--color-text-muted: #9D907F;
	--color-text-disabled: #74695D;

	--color-border: rgba(232, 217, 188, 0.12);
	--color-border-strong: rgba(232, 217, 188, 0.22);
	--color-divider: rgba(232, 217, 188, 0.10);

	--color-accent: #C89B4A;
	--color-accent-hover: #D7AA57;
	--color-accent-soft: rgba(200, 155, 74, 0.14);
	--color-accent-strong: #E2BC72;

	--color-success: #7FA06A;
	--color-warning: #C89B4A;
	--color-danger: #C06E63;
	--color-info: #8A9BA8;

	--input-bg: #241F1B;
	--input-border: rgba(232, 217, 188, 0.14);
	--input-text: #E8D9BC;
	--input-placeholder: #8F8373;

	--button-primary-bg: #C89B4A;
	--button-primary-text: #1E1A17;
	--button-primary-hover: #D7AA57;

	--button-secondary-bg: rgba(200, 155, 74, 0.10);
	--button-secondary-text: #E2BC72;
	--button-secondary-border: rgba(200, 155, 74, 0.18);

	--header-control-bg: rgba(44, 38, 33, 0.36);
	--header-control-hover-bg: rgba(200, 155, 74, 0.08);
	--header-control-active-bg: rgba(200, 155, 74, 0.13);
	--header-control-border: rgba(232, 217, 188, 0.14);
	--header-control-text: #C7B79B;
	--header-control-active-text: #E2BC72;

	--shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.28);

	--color-bg-wash: rgba(200, 155, 74, 0.045);
	--color-focus-ring: rgba(215, 170, 87, 0.62);
	--color-coin-shadow: rgba(0, 0, 0, 0.28);
	--color-scrim: rgba(0, 0, 0, 0.52);
	--color-primary-detail: rgba(30, 26, 23, 0.72);
	--color-disabled-bg: rgba(232, 217, 188, 0.10);
}

html {
	color-scheme: light;
}

html[data-theme="night"] {
	color-scheme: dark;
}

html,
body,
body *,
body *::before,
body *::after {
	transition:
		background-color 280ms ease,
		color 280ms ease,
		border-color 280ms ease,
		box-shadow 280ms ease;
}

:where(button, a, input, select):focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 1ms !important;
	}
}