:root {
	--color-page-white: #ECE9E1;
	--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 */
	--thinking-color-section-bg: var(--color-surface-gray);
	--thinking-color-section-heading: var(--color-text-black);
	--thinking-color-section-text-primary: var(--color-text-black);
	--thinking-color-section-text-secondary: var(--color-text-black);
	--thinking-color-card-bg: var(--color-surface-gray);
	--thinking-color-card-border: transparent;
	--thinking-color-highlight-row-bg: var(--color-soft-gray);
	--thinking-color-highlight-row-text: var(--color-text-black);
	--thinking-color-button-primary-bg: var(--color-bg-header);
	--thinking-color-button-primary-text: var(--color-text-on-dark);
	--thinking-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 tokens (source of truth: site-typography.css) */
	--thinking-font-family-base: var(--font-sans);

	/* Display scale (not used for base h1/h2/h3) */
	--thinking-type-display-xl-size: 4.0625rem;
	--thinking-type-display-xl-weight: var(--fw-semibold);

	/* Base heading/body/button/caption scale */
	--thinking-type-h1-size: 2rem;
	--thinking-type-h1-weight: var(--fw-medium);
	--thinking-type-h2-size: 1.5rem;
	--thinking-type-h2-weight: var(--fw-medium);
	--thinking-type-h3-size: 1.2rem;
	--thinking-type-h3-weight: var(--fw-medium);

	--thinking-type-body-large-size: 1.125rem;
	--thinking-type-body-large-weight: var(--fw-regular);
	--thinking-type-body-regular-size: 1.0625rem;
	--thinking-type-body-regular-weight: var(--fw-regular);

	--thinking-type-caption-size: 14px;
	--thinking-type-caption-weight: var(--fw-regular);
	--thinking-type-button-size: 15px;
	--thinking-type-button-weight: var(--fw-medium);

	--thinking-type-price-value-size: 2rem;
	--thinking-type-price-value-weight: var(--fw-semibold);
	--thinking-type-price-label-size: 15px;
	--thinking-type-price-label-weight: var(--fw-medium);

	--thinking-line-height-display: 1.1;
	--thinking-line-height-h1: 1.15;
	--thinking-line-height-h2: 1.2;
	--thinking-line-height-h3: 1.25;
	--thinking-line-height-title: 1.2;
	--thinking-line-height-body: 1.75;
	--thinking-line-height-caption: 1.6;
	--thinking-line-height-compact: 1.4;
}

@media (max-width: 767px) {
	:root {
		--thinking-type-display-xl-size: 2.5rem;
		--thinking-type-price-value-size: 1.625rem;
		--thinking-type-price-label-size: 14px;
	}
}

body {
	font-family: var(--thinking-font-family-base);
	font-size: var(--thinking-type-body-regular-size);
	font-weight: var(--thinking-type-body-regular-weight);
	line-height: var(--thinking-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(--thinking-font-family-base);
}

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

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

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

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

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

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

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

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

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

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