/* ที่ดินชัวร์ — Design Token กลาง (Sprint 1 · 2026-09-20)
 *
 * ⚠️ **ไฟล์นี้ต้องเป็นสไตล์ชีตตัวแรกของทุกหน้า** — ไฟล์อื่นทับค่าที่นี่ได้ แต่ที่นี่ทับใครไม่ได้
 * `build/pages.js` เป็นคนใส่ให้ อย่าใส่ด้วยมือ
 *
 * ทำไมต้องมี: ก่อนหน้านี้เว็บมีชุดสไตล์ 3 ชุดที่เขียนค่าสีและขนาดตัวอักษรของตัวเองแยกกัน
 * (`home.css` · `marketplace.css` · `ui.css`) บวกกับ inline style อีก 270 จุดในหน้าแรก
 * เปลี่ยนโทนแบรนด์ทีหนึ่งต้องไล่แก้ 4 ที่ และมีที่ที่ลืมทุกครั้ง
 *
 * ⚠️ **ห้ามเพิ่มค่าสีหรือขนาดตัวอักษรใหม่ลงไฟล์อื่นอีก** — ต้องการค่าที่ยังไม่มี ให้เพิ่ม token ที่นี่
 * (กติกาเดียวกับ `landvocab.js` ที่เป็นแหล่งคำศัพท์เดียวของทั้งเว็บ)
 *
 * ⚠️ ชุดสไตล์เดิมทั้งสามยัง **ไม่ได้** ถูกเขียนใหม่ให้อ่านจาก token ทุกบรรทัด
 * รอบนี้ทำแค่ (1) วาง token (2) รวมฟอนต์ให้เหลือตระกูลเดียว (3) ตั้งสเกลตัวอักษร
 * การไล่แทนค่าที่ฝังไว้ในสามไฟล์เดิมเป็นงานของสปรินต์ถัดไป
 */

:root {
  /* ---------- สี ---------- */
  /* Navy — สีหลักของแบรนด์ ใช้กับพื้นเข้ม หัวข้อ และข้อความสำคัญ */
  --nj-navy-900: #0B1F3A;
  --nj-navy-800: #163459;
  --nj-navy-600: #1B4B7A;
  --nj-navy-100: #EEF3F8;
  --nj-navy-050: #F4F7FA;

  /* Gold — สีเน้น ใช้กับปุ่มรอง ตัวเลขเด่น และเส้นโฟกัส
   * ⚠️ ทองบนพื้นสว่างมีความต่างสีไม่พอสำหรับข้อความขนาดปกติ
   *    ใช้เป็น "สีของข้อความ" ได้เฉพาะบนพื้นน้ำเงินเข้มเท่านั้น
   *    บนพื้นสว่างให้ใช้ --nj-navy-600 แทน (ดู ACCESSIBILITY_AUDIT ข้อ A11Y-04) */
  --nj-gold-500: #D8B96B;
  --nj-gold-600: #C79A21;
  --nj-gold-700: #7A5A00;

  /* Neutral Gray — ข้อความรอง เส้นขอบ และพื้นหลัง */
  --nj-gray-900: #31465E;   /* ข้อความเนื้อหา */
  --nj-gray-600: #5A6B7D;   /* ข้อความรอง */
  --nj-gray-400: #8798A9;   /* ข้อความจาง */
  --nj-gray-300: #C8D7E6;   /* เส้นขอบเข้ม */
  --nj-gray-200: #DCE5EF;   /* เส้นขอบ */
  --nj-gray-100: #E7EEF5;   /* พื้นหลังอ่อน */

  --nj-white: #FFFFFF;

  /* สีสถานะ — ใช้กับ alert / badge / ผลตรวจ
   * ⚠️ ห้ามสื่อความหมายด้วยสีอย่างเดียว ต้องมีข้อความกำกับเสมอ
   *    (กติกาเดียวกับรายงานสุขภาพแปลง 4 สถานะ) */
  --nj-ok-fg:    #146C43;
  --nj-ok-bg:    #E6F4EC;
  --nj-warn-fg:  #7A5A00;
  --nj-warn-bg:  #FFF9EA;
  --nj-err-fg:   #A4262C;
  --nj-err-bg:   #FDECEC;
  --nj-info-fg:  #1B4B7A;
  --nj-info-bg:  #EEF3F8;

  /* วารสารที่ดินชัวร์ — ชุดสีของตัววารสาร (ตรงกับ nj-weekly/CLAUDE.md ข้อ 5)
   * ⚠️ ใช้เฉพาะบล็อก/หน้าวารสาร (journal.css) ไม่ใช่สีหลักของเว็บ
   *    เปลี่ยนโทนวารสารต้องแก้ที่ nj-weekly ด้วย ไม่งั้นหน้าเว็บกับตัววารสารคนละสี */
  --nj-journal-green: #0F5C3F;
  --nj-journal-green-soft: #E3F0E9;
  --nj-journal-amber: #B8730A;
  --nj-journal-paper: #F7F8F5;
  --nj-journal-ink: #17251F;

  /* บทบาทของสี — ใช้ตัวนี้ในคอมโพเนนต์ ไม่ใช้ค่าดิบข้างบนตรงๆ */
  --nj-text:        var(--nj-gray-900);
  --nj-text-strong: var(--nj-navy-900);
  --nj-text-muted:  var(--nj-gray-600);
  --nj-link:        var(--nj-navy-600);
  --nj-border:      var(--nj-gray-200);
  --nj-surface:     var(--nj-white);
  --nj-surface-alt: var(--nj-navy-050);
  --nj-focus:       var(--nj-gold-500);

  /* ---------- ตัวอักษร ---------- */
  /* ⚠️ **ตระกูลเดียวทั้งเว็บ** (เจ้าของตัดสิน 20 ก.ย. 2569)
   * ของเดิมหน้าแรกใช้ Trirong + Sarabun ส่วนอีก 20 หน้าใช้ IBM Plex Sans Thai
   * กดจากหน้าแรกไปหน้าอื่นแล้วรู้สึกเหมือนคนละเว็บ — เป็นข้อ M-01/M-02 ในรายงานตรวจ
   * เพิ่มตระกูลที่สองเมื่อไหร่ ปัญหานั้นกลับมาทันที */
  --nj-font: "IBM Plex Sans Thai", "Helvetica Neue", Arial, sans-serif;

  /* สเกล — ค่าเดสก์ท็อป (จอเล็กถูกลดให้ใน media query ท้ายไฟล์) */
  --nj-fs-h1: 52px;   /* โจทย์กำหนด 48–56 */
  --nj-fs-h2: 36px;   /* โจทย์กำหนด 32–40 */
  --nj-fs-h3: 24px;   /* โจทย์กำหนด 22–26 */
  --nj-fs-h4: 20px;
  --nj-fs-lead: 19px;
  --nj-fs-body: 17px; /* โจทย์กำหนด 17–18 */
  --nj-fs-sm: 15px;
  --nj-fs-xs: 13px;
  --nj-fs-nav: 15px;  /* โจทย์กำหนด 15–16 */

  --nj-lh-tight: 1.28;
  --nj-lh-head: 1.34;
  --nj-lh-body: 1.65;  /* โจทย์กำหนด 1.55–1.70 */

  --nj-fw-normal: 400;
  --nj-fw-medium: 500;
  --nj-fw-semi: 600;
  --nj-fw-bold: 700;

  /* ความกว้างข้อความยาวสุด ราว 65–75 ตัวอักษรต่อบรรทัด */
  --nj-measure: 70ch;

  /* ---------- ระยะห่าง ---------- */
  --nj-space-1: 4px;
  --nj-space-2: 8px;
  --nj-space-3: 12px;
  --nj-space-4: 16px;
  --nj-space-5: 24px;
  --nj-space-6: 32px;
  --nj-space-7: 48px;
  --nj-space-8: 64px;
  --nj-space-9: 96px;

  /* ---------- มุมโค้ง ---------- */
  /* ⚠️ ดีไซน์หน้าแรกเป็นมุมเหลี่ยมทั้งหมดโดยตั้งใจ — `--nj-radius-0` มีไว้ให้เรียกใช้ชัดๆ
   *    ไม่ใช่ให้เผลอใส่มุมโค้งเข้าไปเพราะคอมโพเนนต์กลางมีค่าเริ่มต้นเป็นโค้ง */
  --nj-radius-0: 0;
  --nj-radius-sm: 4px;
  --nj-radius-md: 8px;
  --nj-radius-lg: 12px;
  --nj-radius-pill: 999px;

  /* ---------- เงา ---------- */
  --nj-shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.08);
  --nj-shadow-md: 0 4px 12px rgba(11, 31, 58, 0.10);
  --nj-shadow-lg: 0 12px 32px rgba(11, 31, 58, 0.16);

  /* ---------- ชั้นความสูง (z-index) ----------
   * ⚠️ เขียนรวมไว้ที่นี่เพราะของเดิมกระจายอยู่หลายไฟล์แล้วชนกันจริงมาแล้ว
   *    (แบนเนอร์คุกกี้ทับปุ่มแชทจนกดไม่ได้ที่จอ 390px) · ตัวเลขต้องเรียงตามนี้เสมอ */
  --nj-z-sticky: 150;    /* แถบเมนูล่างบนมือถือ */
  --nj-z-header: 500;    /* หัวเว็บแบบติดหนึบ */
  --nj-z-chat: 790;      /* ปุ่มแชท */
  --nj-z-consent: 900;   /* แบนเนอร์คุกกี้ — เรื่องกฎหมาย ต้องอยู่เหนือของทั่วไป */
  --nj-z-drawer: 950;    /* ลิ้นชักเมนูมือถือ */
  --nj-z-modal: 1000;

  /* ---------- จังหวะเคลื่อนไหว ---------- */
  --nj-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --nj-dur: 160ms;

  /* จุดตัดหน้าจอ (ไว้อ้างอิงในคอมเมนต์ — CSS ใช้ var() ใน media query ไม่ได้)
   * มือถือ ≤640 · แท็บเล็ต ≤1023 · เดสก์ท็อป ≥1024 */
}

/* ⚠️ เคารพการตั้งค่าของผู้ใช้ที่ขอให้ลดการเคลื่อนไหว — กติกาข้อ 7 ของ CLAUDE.md */
@media (prefers-reduced-motion: reduce) {
  :root { --nj-dur: 0ms; }
}

/* ---------- ฐานของทุกหน้า ----------
 * เขียนเท่าที่จำเป็น เพื่อไม่ให้ไปทับสไตล์เดิมของสามชุดโดยไม่ตั้งใจ
 * ตัวที่ตั้งใจให้มีผลทั้งเว็บคือ "ตระกูลฟอนต์" เท่านั้น */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--nj-font);
  -webkit-font-smoothing: antialiased;
}

/* ตระกูลฟอนต์ต้องไหลลงไปถึงตัวควบคุมฟอร์มด้วย
 * เบราว์เซอร์ไม่ทำให้เอง — เคยเจอ select/ตัวเลือกกลายเป็นฟอนต์ระบบทั้งหน้า */
input, select, textarea, button { font-family: inherit; }

/* ---------- สเกลตัวอักษรบนจอเล็ก ---------- */
@media (max-width: 640px) {
  :root {
    --nj-fs-h1: 36px;   /* โจทย์กำหนด 32–38 */
    --nj-fs-h2: 28px;   /* โจทย์กำหนด 26–30 */
    --nj-fs-h3: 22px;
    --nj-fs-h4: 19px;
    --nj-fs-lead: 17px;
    --nj-fs-body: 16px; /* โจทย์กำหนด 16–17 */
  }
}

/* จอ 360–375 px ยังแคบกว่านั้นอีก — H1 ที่ 36px ตัดเป็น 4 บรรทัด (วัดจริงในรายงาน RESPONSIVE)
 * โจทย์กำหนดไม่เกิน 3 บรรทัดบนมือถือ จึงลดลงอีกขั้นเฉพาะช่วงนี้ */
@media (max-width: 380px) {
  :root { --nj-fs-h1: 32px; }
}