/* public/shared/tokens.css — โทเคนดีไซน์ทั้งเว็บ (design/00-direction.md §2.2, §3.3, §4.1)
   ค่าทุกตัวลอกมาจาก design/00-direction.md ตรงๆ ไม่มีค่าที่ engineer คิดเอง
   ⚠️ ห้ามเขียนค่าสี/ระยะห่าง/ขนาดตัวอักษรดิบใน component ใดๆ — ใช้ var(--...) จากไฟล์นี้เท่านั้น
   (§2.1: "ตั้งชื่อตัวแปรแบบหน้าที่ ไม่ใช่สี" — เพื่อให้พลิกขั้วพื้นหลัง (§10 ข้อ A) เป็นการสลับค่าไฟล์เดียว) */

:root {
  color-scheme: dark; /* กัน Chrome Android auto-dark ย้อมทับ (§6) */

  /* ---------- พื้นผิว (§2.2) ---------- */
  --surface: #131110;
  --surface-2: #1e1a17;
  --surface-3: #2a2420;
  --surface-photo: #0b0a09;
  --line: #3a322c;
  /* --line-strong ปรับจาก #574B41 เป็น #887566 — ค่าเดิมวัดได้แค่ ~2.2:1 กับ --surface ซึ่งไม่ถึง 3:1
     ที่ §2.4 บังคับสำหรับ "ขอบช่องกรอก ไอคอน เส้นที่ต้องเห็น" (ตัวคำนวณราคาในหน้านี้มี select/ปุ่มรอง
     ที่วางอยู่ทั้งบน --surface-2 และบน --accent-dim ในกล่อง callout — ต้องผ่าน 3:1 กับทั้งสามพื้นผิว)
     ค่าใหม่วัดได้: ~4.3:1 กับ surface, ~3.9:1 กับ surface-2, ~3.2:1 กับ accent-dim — ผ่านทั้งสามคู่
     หลักฐานตัวเลขอยู่ในรายงานที่ส่งพร้อมงาน · ได้รับอนุญาตตาม §2.4 */
  --line-strong: #887566;

  /* ---------- ตัวหนังสือ (§2.2) ---------- */
  --on-surface: #f7f3ec;
  --on-surface-2: #c9c0b4;
  /* --on-surface-3 ปรับจาก #9A8F82 เป็น #ABA096 — คู่กับ --surface #131110 วัดได้ราว 5.4:1 ที่ค่าเดิม
     (ต้องการ 7:1 ตาม §2.4 เพราะใช้กับ --fs-fine "ราคา ณ วันที่ …") ค่านี้วัดได้ ~7.35:1 กับ --surface
     — ผ่าน แต่กับ --accent-dim (พื้นกล่อง callout) วัดได้แค่ ~5.4:1 ไม่ถึง 7:1 → **ห้ามใช้ --on-surface-3
     บนพื้น --accent-dim** ใช้ --on-surface-2 แทนในบริบทนั้น (ดู .callout .fine-print ใน chrome.css)
     หลักฐานตัวเลขอยู่ในรายงานที่ส่งพร้อมงาน — ได้รับอนุญาตให้แก้ที่ค่าโทเคนตาม §2.4 */
  --on-surface-3: #aba096;

  /* ---------- อำพัน — ตัวเน้นเดียวของเว็บ (§2.2) ---------- */
  --accent: #ffb01f;
  --accent-hot: #ffc24d;
  --on-accent: #16120d;
  --accent-dim: #3a2a0c;

  /* ---------- สถานะ (§2.2) ---------- */
  --open: #57c878;
  --closed: #ff8a6b;
  --alert: #ff7a5e;
  --focus: #ffb01f;

  /* ---------- ระยะห่าง ฐาน 4px (§4.1) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --gutter: 20px; /* มือถือ — §4.1 */
  --radius: 10px;
  --radius-sm: 6px;

  /* ---------- ตัวอักษร (§3.1, §3.3) ----------
     Noto Sans Thai ยังไม่ได้ self-host เป็น .woff2 ในรอบนี้ (ไม่มีไฟล์ฟอนต์อยู่ในเรโป) —
     ใช้ fallback stack ของ designer เต็มรูปไปก่อน ดูคำอธิบายเต็มใน public/shared/README.md
     "ข้อจำกัดที่ยังไม่ปิด: ฟอนต์" — โครง CSS พร้อมสลับเป็น @font-face ทันทีที่มีไฟล์ .woff2 จริง */
  --font-body: "Noto Sans Thai", "Leelawadee UI", "Thonburi", system-ui, sans-serif;

  --fs-display: 40px;
  --fs-h1: 32px;
  --fs-h2: 26px;
  --fs-h3: 22px;
  --fs-price: 24px;
  --fs-btn: 20px;
  --fs-btn-lg: 22px;
  --fs-body: 18px;
  --fs-small: 16px;
  --fs-fine: 15px;

  /* ---------- ขนาดแตะ (§4.2) ---------- */
  --tap-min: 48px;
  --btn-h: 56px;
  --btn-lg-h: 72px;
  --callbar-h: 64px;
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --fs-display: 50px; /* ×1.25 ตาม §3.3 */
    --fs-h1: 40px;
    --fs-h2: 32.5px;
    /* --fs-body คงที่ 18px ห้ามลด (§3.3) */
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  :root {
    --gutter: 24px;
  }
}