/* ui/base.css — ฐานร่วมของ 2 เว็บ (reset · ตัวอักษร · utility เล็กๆ)
 * ใช้ token ของแต่ละเว็บ (tokens.css ในธีม) · กติกาทั้งหมดดู ui/README.md
 * ไฟล์นี้ห้ามมีค่าสี / ขนาดที่เขียนตรงๆ (tools/build.py ตรวจ) */

/* ---------- token ความหมาย: ค่าเริ่มต้นชี้ไปชื่อของ SCG95 · LVMH ตั้งเองใน tokens.css ----------
 * :where() = specificity 0 → ค่าที่ธีมตั้งบน :root ชนะเสมอ ไม่ขึ้นกับลำดับโหลด */
:where(:root) {
	--ui-primary: var(--c-primary);            /* ปุ่ม / ลิงก์ / ไฮไลต์หลัก */
	--ui-primary-hover: var(--c-primary-700);
	--ui-primary-soft: var(--c-primary-50);    /* พื้นอ่อนของสีหลัก (chip ที่เลือก, ป้าย) */
	--ui-on-primary: var(--c-surface);          /* ตัวอักษรบนสีหลัก */
	--ui-cta: var(--ui-primary);                /* ปุ่มสำคัญที่สุดของหน้า (ซื้อเลย / ส่งคำขอ) */
	--ui-cta-hover: var(--ui-primary-hover);
	--ui-danger: var(--c-sale, var(--c-danger));
	--ui-ok: var(--c-ok);
	--ui-warn: var(--c-warn);
	--ui-info: var(--c-info);
	--ui-hot: var(--c-yellow, var(--c-accent));  /* ป้าย "ขายดี" */
	--ui-radius-control: var(--r-pill, var(--r)); /* ปุ่ม / chip / ช่องจำนวน */
	--ui-radius-box: var(--r-lg);                /* กล่อง / การ์ด */
	--ui-gap: var(--sp-5);                       /* ระยะห่างมาตรฐานของ grid */
	--ui-section: 56px;                          /* ระยะบนล่างของ .section */

	/* ระยะห่าง: ใช้เฉพาะขั้นเหล่านี้ (margin / padding / gap) · ของใหม่ห้ามใช้ px อื่น */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;

	/* น้ำหนัก / ระยะบรรทัด */
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--lh-tight: 1.25;   /* หัวข้อ */
	--lh-snug: 1.4;     /* ชื่อสินค้า / ข้อความสั้นหลายบรรทัด */
	--lh-body: 1.6;     /* เนื้อหา */

	/* สถานะโต้ตอบ */
	--focus-ring: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 35%, transparent);
	--dur: .15s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--c-ink); background: var(--c-bg); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: var(--lh-tight); margin: 0 0 .5em; font-weight: var(--fw-semibold); }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- utility ---------- */
.muted { color: var(--c-muted); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.center { text-align: center; }
.screen-reader-text, .sr-only { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.show-sm { display: none !important; }
@media (max-width: 960px) {
	.hide-sm { display: none !important; }
	.show-sm { display: initial !important; }
}

/* focus: เห็นชัดเมื่อใช้คีย์บอร์ด (ไม่แสดงตอนคลิกเมาส์) · ทุกปุ่ม / ลิงก์ / ช่องกรอก เหมือนกัน */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; } }

/* ไอคอน Lucide (inline SVG มี data-lucide) */
[data-lucide] { width: 20px; height: 20px; stroke-width: 2; flex: none; }
svg[data-lucide] { display: inline-block; vertical-align: middle; }