:root {
	/* Brand colors */
	--tc-red: #b22222;
	--tc-red-dark: #7f1d1d;
	--tc-grey: #52525b;
	--tc-bg: #f4f4f6;
	--tc-paper: #ffffff;
	--tc-line: #e4e4e7;
	--tc-text: #18181b;
	--tc-muted: #71717a;

	/* Footer — full-bleed dark band (Open shell; used with .tc-site-footer__band) */
	--tc-footer-bg: #343438;
	--tc-footer-bg-deep: #2a2a2e;

	/* Layout */
	--tc-max: 1120px;
	--tc-radius: 22px;
	--tc-shadow: 0 16px 44px rgba(15, 23, 42, 0.07);
	--tc-section-gap: 44px;
	--tc-stack-gap: 12px;
	--tc-content-gap-lg: 24px;

	/* Typography scale */
	--tc-font-size-label: 12px;
	--tc-font-size-meta: 13px;
	--tc-font-size-nav: 14px;
	--tc-font-size-brand: 1.16rem;
	--tc-font-size-tagline: 0.88rem;
	--tc-font-size-eyebrow: 13px;
	--tc-font-size-body-sm: 0.95rem;
	--tc-font-size-body: 1rem;
	--tc-font-size-body-lg: clamp(1.02rem, 1.45vw, 1.22rem);
	--tc-font-size-page-title: clamp(1.72rem, 2.2vw, 2.3rem);
	--tc-font-size-card-title: 1.18rem;
	--tc-font-size-kpi-title: 1.24rem;
	--tc-font-size-section-title: clamp(1.72rem, 2.5vw, 2.45rem);
	--tc-font-size-display: clamp(1.95rem, 3.8vw, 3.9rem);
	--tc-font-size-modal-title: 1.7rem;
	--tc-line-height-display: 0.98;
	--tc-line-height-title: 1.04;
	--tc-letter-spacing-display: -0.05em;
	--tc-letter-spacing-title: -0.04em;

	/* Button presets */
	--tc-btn-height: 48px;
	--tc-btn-height-compact: 46px;
	--tc-btn-padding-x: 20px;
	--tc-btn-padding-x-compact: 18px;
	--tc-btn-font-size: 14px;
	--tc-btn-font-size-compact: 13px;
	--tc-btn-radius: 999px;
	--tc-btn-radius-compact: 12px;
	--tc-btn-shadow-primary: 0 14px 34px rgba(178, 34, 34, 0.24);
	--tc-btn-shadow-secondary: 0 14px 34px rgba(63, 63, 70, 0.2);

	/* Brand image sizes */
	--tc-brand-icon-size: 50px;
	--tc-brand-mark-size: 54px;
	--tc-brand-mark-radius: 16px;
	--tc-brand-mark-font-size: 24px;
	--tc-brand-logo-height: 56px;
	--tc-footer-icon-size: 56px;
	--tc-footer-mark-font-size: 22px;

	/*
	 * Shell chrome — cool paper (legacy paper surfaces; header/footer shell 默认已切平铺顶栏 + 深色页脚带).
	 * Gradients are stored as whole <image> values (not rgba stops inside shell.css) so var() is not nested
	 * inside linear-gradient() — avoids broken backgrounds in some WebKit / editor iframe stacks.
	 */
	--tc-chrome-paper-fill: linear-gradient(180deg, rgba(253, 254, 255, 0.91), rgba(246, 249, 252, 0.79));
	--tc-chrome-paper-tint: linear-gradient(135deg, rgba(178, 34, 34, 0.035), rgba(127, 29, 29, 0));
	--tc-chrome-paper-highlight: rgba(252, 254, 255, 0.88);
	--tc-chrome-toggle-bg: rgba(252, 253, 255, 0.93);
	--tc-chrome-toggle-highlight: rgba(255, 255, 255, 0.94);
	--tc-chrome-drawer-links-bg: rgba(250, 252, 255, 0.91);
	--tc-chrome-footer-fill: linear-gradient(180deg, rgba(253, 254, 255, 0.94) 0%, rgba(245, 249, 252, 0.88) 100%);
	--tc-chrome-footer-tint: linear-gradient(135deg, rgba(178, 34, 34, 0.025), rgba(127, 29, 29, 0));
	--tc-chrome-footer-highlight: rgba(252, 254, 255, 0.82);
}

@media (max-width: 768px) {
	:root {
		--tc-section-gap: 28px;
		--tc-stack-gap: 10px;
		--tc-content-gap-lg: 20px;
		--tc-brand-icon-size: 42px;
		--tc-brand-mark-size: 46px;
		--tc-brand-mark-font-size: 21px;
		--tc-footer-icon-size: 48px;
		--tc-footer-mark-font-size: 20px;
		--tc-font-size-page-title: clamp(1.56rem, 4.8vw, 1.95rem);
		--tc-font-size-display: clamp(1.82rem, 8vw, 2.55rem);
		--tc-btn-height-compact: 44px;
	}
}

@media (max-width: 560px) {
	:root {
		--tc-section-gap: 24px;
		--tc-stack-gap: 8px;
		--tc-content-gap-lg: 18px;
		--tc-brand-icon-size: 38px;
		--tc-brand-mark-size: 42px;
		--tc-brand-mark-font-size: 19px;
		--tc-footer-icon-size: 42px;
		--tc-footer-mark-font-size: 18px;
		--tc-font-size-brand: 1.02rem;
		--tc-font-size-tagline: 0.78rem;
		--tc-btn-padding-x-compact: 16px;
	}
}