:root {
	--color-page-white: #FDFDFD;
	--color-surface-gray: #FAFBFC;
	--color-text-black: #1D1D1F;
	--color-border-gray: rgba(29, 29, 31, 0.12);
	--color-soft-gray: rgba(29, 29, 31, 0.06);

	--color-cream: #F2E8D5;
	--color-brown: #9C7152;
	--color-primary-green: #4F5337;

	--color-bg-page: var(--color-page-white);
	--color-bg-surface: var(--color-page-white);
	--color-bg-header: var(--color-primary-green);
	--color-text-on-light: var(--color-text-black);
	--color-text-on-dark: var(--color-cream);
	--color-heading-on-light: var(--color-text-black);
	--color-border-soft: var(--color-border-gray);

	/* Reusable semantic tokens for shortcode section themes */
	--rv-color-section-bg: var(--color-surface-gray);
	--rv-color-section-heading: var(--color-text-black);
	--rv-color-section-text-primary: var(--color-text-black);
	--rv-color-section-text-secondary: var(--color-text-black);
	--rv-color-card-bg: var(--color-surface-gray);
	--rv-color-card-border: transparent;
	--rv-color-highlight-row-bg: var(--color-soft-gray);
	--rv-color-highlight-row-text: var(--color-text-black);
	--rv-color-button-primary-bg: var(--color-bg-header);
	--rv-color-button-primary-text: var(--color-text-on-dark);
	--rv-color-section-soft-bg: var(--color-surface-gray);


	--font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
	--font-serif: var(--font-sans);
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* Global typography scale */
	--rv-font-family-base: var(--font-sans);

	--rv-type-display-xl-size: 65px;
	--rv-type-display-xl-weight: var(--fw-semibold);

	--rv-type-h1-size: 48px;
	--rv-type-h1-weight: var(--fw-semibold);

	--rv-type-h2-size: 30px;
	--rv-type-h2-weight: var(--fw-bold);

	--rv-type-h3-size: 24px;
	--rv-type-h3-weight: var(--fw-medium);

	--rv-type-body-large-size: 22px;
	--rv-type-body-large-weight: var(--fw-regular);

	--rv-type-body-regular-size: 20px;
	--rv-type-body-regular-weight: var(--fw-regular);

	--rv-type-caption-size: 14px;
	--rv-type-caption-weight: var(--fw-regular);

	--rv-type-button-size: 16px;
	--rv-type-button-weight: var(--fw-semibold);

	--rv-type-price-value-size: 32px;
	--rv-type-price-value-weight: var(--fw-semibold);

	--rv-type-price-label-size: 15px;
	--rv-type-price-label-weight: var(--fw-medium);

	--rv-line-height-display: 1.1;
	--rv-line-height-title: 1.2;
	--rv-line-height-body: 1.65;
	--rv-line-height-compact: 1.4;
}


@media (max-width: 767px) {
	:root {
		--rv-type-display-xl-size: 40px;
		--rv-type-h1-size: 32px;
		--rv-type-h2-size: 24px;
		--rv-type-h3-size: 20px;
		--rv-type-body-large-size: 22px;
		--rv-type-body-regular-size: 20px;
		--rv-type-caption-size: 13px;
		--rv-type-button-size: 15px;
		--rv-type-price-value-size: 26px;
		--rv-type-price-label-size: 14px;
	}
}

body {
	font-family: var(--rv-font-family-base);
	font-size: var(--rv-type-body-regular-size);
	font-weight: var(--rv-type-body-regular-weight);
	line-height: var(--rv-line-height-body);
	background: var(--color-bg-page);
	color: var(--color-text-on-light);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
button,
input,
select,
textarea {
	font-family: var(--rv-font-family-base);
}

.rv-type-display-xl {
	font-size: var(--rv-type-display-xl-size);
	font-weight: var(--rv-type-display-xl-weight);
	line-height: var(--rv-line-height-display);
}

.rv-type-h1 {
	font-size: var(--rv-type-h1-size);
	font-weight: var(--rv-type-h1-weight);
	line-height: var(--rv-line-height-title);
}

.rv-type-h2 {
	font-size: var(--rv-type-h2-size);
	font-weight: var(--rv-type-h2-weight);
	line-height: var(--rv-line-height-title);
}

.rv-type-h3 {
	font-size: var(--rv-type-h3-size);
	font-weight: var(--rv-type-h3-weight);
	line-height: var(--rv-line-height-title);
}

.rv-type-body-large {
	font-size: var(--rv-type-body-large-size);
	font-weight: var(--rv-type-body-large-weight);
	line-height: var(--rv-line-height-body);
}

.rv-type-body {
	font-size: var(--rv-type-body-regular-size);
	font-weight: var(--rv-type-body-regular-weight);
	line-height: var(--rv-line-height-body);
}

.rv-type-caption {
	font-size: var(--rv-type-caption-size);
	font-weight: var(--rv-type-caption-weight);
	line-height: var(--rv-line-height-compact);
}

.rv-type-button {
	font-size: var(--rv-type-button-size);
	font-weight: var(--rv-type-button-weight);
	line-height: 1.2;
}

.rv-type-price-value {
	font-size: var(--rv-type-price-value-size);
	font-weight: var(--rv-type-price-value-weight);
	line-height: 1.1;
}

.rv-type-price-label {
	font-size: var(--rv-type-price-label-size);
	font-weight: var(--rv-type-price-label-weight);
	line-height: var(--rv-line-height-compact);
}