/* Design tokens — Hollywood Smile (handoff §7). Per site: change only the THEME/ACCENT/NEUTRAL blocks (+ logo). */
:root {
	/* THEME — Hollywood Smile "Royal Blue & Gold" (handoff §7) */
	--brand-800: #003F7A; /* hover — white 10.5:1 */
	--brand-700: #00599E; /* primary button, link — white 7.2:1 */
	--brand-600: #0070B0; /* eyebrow, icon — on white 5.3:1 */
	--brand-300: #B8D8F8; /* pastel sky — decoration only, never behind white text */
	--brand-100: #E3F0FC; /* border, icon tile, badge */
	--brand-50:  #F4F9FE; /* section tint */
	/* ACCENT (optional per site — shared CSS falls back to brand when absent) */
	--gold-700: #8A5A1F; /* gold text — on white 5.9:1 */
	--gold-500: #B8863F; /* icons, stars, rules (not small text) */
	--gold-300: #D8B47A; /* thin rules, photo frames · text on dark */
	--gold-100: #F7EEDF; /* champagne badge */
	--line-gold: #E6D3AE;
	--surface-ivory: #FBF8F2;
	--font-serif: 'Cormorant Garamond', Georgia, serif;
	--eyebrow-rule: 24px;   /* short gold rule before eyebrows */
	--brand-name: #00599E;  /* wordmark colour in the header */
	--brand-sub-order-th: -1;
	--nav-pad-x: 8px;       /* 6 menu items + Services ▾ stay on one line at 1280 */

	/* NEUTRAL */
	--ink: #13294B;
	--ink-muted: #4A5B72;
	--surface-dark: #0B2545;
	--surface-dark-2: #1C3A5E;
	--on-dark: #DCE6F2;
	--on-dark-muted: #B9C7D8;
	--on-dark-faint: #9FB0C6;
	--line: #E3F0FC;
	--line-strong: #C9DDF2;
	--line-pill: #DCE7F2;
	--white: #FFFFFF;
	--line-app: #06C755;
	--whatsapp: #25D366;
	--on-chat: #FFFFFF;

	/* SHAPE */
	--r-input: 12px;
	--r-card: 20px;
	--r-panel: 26px;
	--r-pill: 999px;
	--container: 1200px;
	--gutter: 16px;
	--section-y: 40px;
	--tap: 44px;
	--shadow-bar: 0 -6px 20px rgba(19, 41, 75, .10);
	--shadow-card: 0 10px 30px rgba(19, 41, 75, .08);

	/* TYPE */
	--font-en: 'Poppins', 'Noto Sans Thai', system-ui, sans-serif;
	--font-th: 'Noto Sans Thai', 'Poppins', system-ui, sans-serif;
	--font-th-head: 'Prompt', 'Poppins', sans-serif;
	--fs-h1: 31px;
	--fs-h2: 25px;
	--fs-h3: 16px;
	--fs-body: 16px;
	--fs-eyebrow: 13px;
	--lh: 1.6;
}

@media (min-width: 1024px) {
	:root {
		--gutter: 40px;
		--section-y: 88px;
		--fs-h1: 52px;
		--fs-h2: 38px;
		--fs-h3: 18px;
		--fs-body: 17px;
		--fs-eyebrow: 14px;
		--eyebrow-rule: 32px;
	}
}