/**
 * Henghud — Design tokens (README ข้อ 3.1)
 * ห้าม hard-code สีหรือขนาดใน component ให้ใช้ตัวแปรจากไฟล์นี้เท่านั้น
 */

/* ---------- Fonts (self-hosted, SIL OFL) ---------- */
@font-face {
	font-family: "Noto Sans Thai";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/noto-sans-thai-thai.woff2") format("woff2");
	unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
	font-family: "Noto Sans Thai";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/noto-sans-thai-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Light (ค่าเริ่มต้น) ---------- */
:root {
	/* ผูกกับธีมที่เลือกบนเว็บ ไม่ใช่ของระบบ: scrollbar / checkbox / select ของเบราว์เซอร์จะได้สีตรงกับหน้าเว็บ */
	color-scheme: light;
	--hh-scrollbar: color-mix(in srgb, var(--hh-text) 22%, transparent);

	--hh-bg: #ffffff;
	--hh-surface: #f7f7f5;
	--hh-surface-2: #efefec;
	--hh-card-media: #f7f7f5;
	--hh-text: #1a1a1a;
	--hh-text-muted: #6b6b6b;
	--hh-border: #e4e4e0;
	--hh-accent: #008104;
	--hh-accent-hover: color-mix(in srgb, var(--hh-accent) 82%, #000);
	--hh-accent-soft: color-mix(in srgb, var(--hh-accent) 10%, var(--hh-bg));
	--hh-accent-ink: color-mix(in srgb, var(--hh-accent) 80%, #000); /* ตัวอักษรสีหลักบนพื้น accent-soft */
	--hh-accent-2: #6aba6f;
	--hh-accent-contrast: #ffffff;
	--hh-danger: #c62828;
	--hh-line: #06c755; /* สีแบรนด์ LINE (ไอคอน/ตัวเน้น) */
	--hh-line-ui: #00873c; /* พื้นปุ่ม LINE ที่มีตัวอักษรขาว: contrast 4.6:1 ผ่าน WCAG AA (#06c755 ได้แค่ 2.3:1) */
	--hh-messenger: #0866ff;
	--hh-overlay: rgb(15 15 16 / 0.45);

	/* Typography — ละตินก่อนไทย เพื่อให้อังกฤษใช้ Montserrat ส่วนไทยตกไป Noto Sans Thai (unicode-range) */
	--hh-font-heading: "Montserrat", "Noto Sans Thai", system-ui, sans-serif;
	--hh-font-body: "Noto Sans Thai", "Noto Sans", system-ui, sans-serif;
	--hh-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--hh-font-scale: 1;
	--hh-line-height: 1.7;
	--hh-fs-xs: 0.75rem;
	--hh-fs-sm: 0.875rem;
	--hh-fs-base: 1rem;
	--hh-fs-lg: 1.125rem;
	--hh-fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--hh-fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
	--hh-fs-3xl: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);

	/* Layout */
	--hh-container: 1280px;
	--hh-container-narrow: 760px;
	--hh-gutter: clamp(16px, 4vw, 40px);
	--hh-section-y: clamp(48px, 7vw, 96px);
	--hh-radius-sm: 4px;
	--hh-radius: 8px;
	--hh-radius-lg: 16px;
	--hh-header-h: 64px;
	--hh-logo-h: 44px;
	--hh-logo-h-mobile: 34px;
	--hh-bottom-nav-h: 0px;
	--hh-fab-offset: 0px;

	/* Motion (README ข้อ 12.1) */
	--hh-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--hh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--hh-dur-fast: 150ms;
	--hh-dur: 250ms;
	--hh-dur-slow: 450ms;

	/* Elevation */
	--hh-shadow-1: 0 1px 2px rgb(0 0 0 / 0.06);
	--hh-shadow-2: 0 8px 24px rgb(0 0 0 / 0.08);
	--hh-shadow-3: 0 18px 48px rgb(0 0 0 / 0.14);
}

/* ---------- Dark ---------- */
[data-theme="dark"] {
	color-scheme: dark;
	--hh-bg: #0f0f10;
	--hh-surface: #18181a;
	--hh-surface-2: #222225;
	--hh-card-media: #ececea; /* รูปขวดใสต้องวางบนพื้นสว่างกว่า ไม่ให้กลืนกับพื้นดำ (ข้อ 3.2) */
	--hh-text: #f2f2f0;
	--hh-text-muted: #a3a3a3;
	--hh-border: #2c2c30;
	--hh-accent: #41c053; /* #008104 บนพื้นดำ contrast ไม่ถึง AA */
	--hh-accent-ink: var(--hh-accent);
	--hh-accent-contrast: #0f0f10;
	--hh-overlay: rgb(0 0 0 / 0.6);
	--hh-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
	--hh-shadow-2: 0 8px 24px rgb(0 0 0 / 0.4);
	--hh-shadow-3: 0 18px 48px rgb(0 0 0 / 0.55);
}

/* ไม่มี JavaScript: ตามระบบของผู้ใช้ */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		color-scheme: dark;
		--hh-bg: #0f0f10;
		--hh-surface: #18181a;
		--hh-surface-2: #222225;
		--hh-card-media: #ececea;
		--hh-text: #f2f2f0;
		--hh-text-muted: #a3a3a3;
		--hh-border: #2c2c30;
		--hh-accent: #41c053;
		--hh-accent-ink: var(--hh-accent);
		--hh-accent-contrast: #0f0f10;
		--hh-overlay: rgb(0 0 0 / 0.6);
	}
}

@media (max-width: 1023px) {
	:root {
		--hh-header-h: 56px;
	}
}