/**
 * Chen Ying color system — Micromed-inspired medical e-com layout.
 *
 * Brand core:
 *   Blue  #07318C  — emblem + wordmark
 *   Red   #E30514  — emblem center
 *   Gray  #4B4C4F  — secondary wordmark
 *   Black #000000  — Chinese characters
 */

:root {
	/* Brand primitives */
	--twp-brand-blue: #07318c;
	--twp-brand-red: #e30514;
	--twp-brand-gray: #4b4c4f;
	--twp-brand-black: #000000;

	--twp-rgb-primary: 7, 49, 140;
	--twp-rgb-accent: 227, 5, 20;
	--twp-rgb-fg: 18, 20, 26;

	/* Semantic — light (medical e-com) */
	--twp-color-bg: #ffffff;
	--twp-color-fg: #12141a;
	--twp-color-primary: #07318c;
	--twp-color-primary-hover: #052468;
	--twp-color-primary-soft: #e8eef8;
	--twp-color-accent: #e30514;
	--twp-color-accent-hover: #c00411;
	--twp-color-muted: #5c6370;
	--twp-color-surface: #ffffff;
	--twp-color-border: #e2e6ef;
	--twp-color-overlay: rgba(7, 49, 140, 0.72);
	--twp-color-on-primary: #ffffff;
	--twp-color-on-accent: #ffffff;
	--twp-color-success: #1a8a5c;
	--twp-color-error: #e30514;

	--twp-header-bg: #ffffff;
	--twp-header-fg: #12141a;
	--twp-header-muted: #5c6370;

	--twp-font-display: "Manrope", system-ui, sans-serif;
	--twp-font-body: "Source Sans 3", system-ui, sans-serif;

	--twp-text-sm: 0.875rem;
	--twp-text-base: 1rem;
	--twp-text-lg: 1.125rem;
	--twp-text-xl: 1.5rem;
	--twp-text-2xl: clamp(1.5rem, 2.5vw, 2rem);
	--twp-text-3xl: clamp(1.875rem, 4vw, 2.75rem);

	--twp-space-xs: 0.5rem;
	--twp-space-sm: 1rem;
	--twp-space-md: 1.5rem;
	--twp-space-lg: 2.5rem;
	--twp-space-xl: 4rem;
	--twp-space-2xl: 6rem;

	--twp-radius-sm: 4px;
	--twp-radius-md: 6px;
	--twp-radius-lg: 10px;

	--twp-shadow-sm: 0 1px 3px rgba(11, 18, 32, 0.06);
	--twp-shadow-md: 0 6px 20px rgba(11, 18, 32, 0.1);

	--twp-header-h: 9.5rem;
	--twp-content: 42rem;
	--twp-wide: 88rem;
	--twp-gutter: clamp(1rem, 2.5vw, 2.5rem);
	--twp-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--twp-duration: 280ms;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--twp-rgb-primary: 91, 143, 239;
		--twp-rgb-accent: 255, 77, 87;
		--twp-rgb-fg: 233, 236, 242;

		--twp-color-bg: #0a0e16;
		--twp-color-fg: #e9ecf2;
		--twp-color-primary: #5b8fef;
		--twp-color-primary-hover: #7aa3f5;
		--twp-color-primary-soft: #152038;
		--twp-color-accent: #ff4d57;
		--twp-color-accent-hover: #ff6b73;
		--twp-color-muted: #9aa0ab;
		--twp-color-surface: #141a26;
		--twp-color-border: #2a3344;
		--twp-color-overlay: rgba(7, 20, 48, 0.82);
		--twp-color-on-primary: #061018;
		--twp-color-on-accent: #ffffff;
		--twp-color-success: #3dba87;
		--twp-color-error: #ff4d57;
		--twp-header-bg: #060910;
		--twp-header-fg: #e9ecf2;
		--twp-header-muted: rgba(233, 236, 242, 0.7);
		--twp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
		--twp-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
	}
}

[data-theme="dark"] {
	--twp-rgb-primary: 91, 143, 239;
	--twp-rgb-accent: 255, 77, 87;
	--twp-rgb-fg: 233, 236, 242;

	--twp-color-bg: #0a0e16;
	--twp-color-fg: #e9ecf2;
	--twp-color-primary: #5b8fef;
	--twp-color-primary-hover: #7aa3f5;
	--twp-color-primary-soft: #152038;
	--twp-color-accent: #ff4d57;
	--twp-color-accent-hover: #ff6b73;
	--twp-color-muted: #9aa0ab;
	--twp-color-surface: #141a26;
	--twp-color-border: #2a3344;
	--twp-color-overlay: rgba(7, 20, 48, 0.82);
	--twp-color-on-primary: #061018;
	--twp-color-on-accent: #ffffff;
	--twp-color-success: #3dba87;
	--twp-color-error: #ff4d57;
	--twp-header-bg: #060910;
	--twp-header-fg: #e9ecf2;
	--twp-header-muted: rgba(233, 236, 242, 0.7);
	--twp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
	--twp-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
}

[data-theme="light"] {
	--twp-rgb-primary: 7, 49, 140;
	--twp-rgb-accent: 227, 5, 20;
	--twp-rgb-fg: 18, 20, 26;

	--twp-color-bg: #ffffff;
	--twp-color-fg: #12141a;
	--twp-color-primary: #07318c;
	--twp-color-primary-hover: #052468;
	--twp-color-primary-soft: #e8eef8;
	--twp-color-accent: #e30514;
	--twp-color-accent-hover: #c00411;
	--twp-color-muted: #5c6370;
	--twp-color-surface: #ffffff;
	--twp-color-border: #e2e6ef;
	--twp-color-overlay: rgba(7, 49, 140, 0.72);
	--twp-color-on-primary: #ffffff;
	--twp-color-on-accent: #ffffff;
	--twp-color-success: #1a8a5c;
	--twp-color-error: #e30514;
	--twp-header-bg: #ffffff;
	--twp-header-fg: #12141a;
	--twp-header-muted: #5c6370;
	--twp-shadow-sm: 0 1px 3px rgba(11, 18, 32, 0.06);
	--twp-shadow-md: 0 6px 20px rgba(11, 18, 32, 0.1);
}