/* tokens.css — design token ระบบรับแก้ยูนิฟอร์ม
   ที่มา: Handoff (Sep 23, 2026) หัวข้อ 6.1 และ 6.2 อ้างอิงหน้า Boutique Uniform บน btnc.co.th
   ค่าทุกตัวถอดจาก mockup ที่ผ่านการใช้งานจริงกับ King Power แล้ว ไม่ได้ออกแบบใหม่

   ชื่อตัวแปรใช้ตามโค้ด mockup เพื่อให้ยกมาใช้ต่อได้ทันที
   ตารางเทียบกับชื่อในเอกสาร: --bg = canvas, --ink-2 = ink-2, ที่เหลือชื่อตรงกัน

   ธีมมี 3 สถานะ ไม่ใช่ 2:
     :root                                    = light (ค่าตั้งต้น ต้องครบทุกตัวที่นี่)
     prefers-color-scheme: dark ที่ไม่ถูก stamp = dark ตามเครื่อง
     [data-theme="dark"] / ="light"            = ผู้ใช้เลือกเอง ชนะทุกกรณี
*/

:root {
  /* ---- หมึกและตัวอักษร ---- */
  --ink:        #1E2A24;   /* ตัวอักษร หัวข้อ ปุ่มหลัก เส้นคั่นหลัก */
  --ink-2:      #44514A;   /* หัวตาราง ข้อความรอง */
  --muted:      #7C8781;   /* คำอธิบาย ป้ายกำกับ */

  /* ---- พื้นผิว ---- */
  --bg:         #F3F2EE;   /* พื้นหลังหน้าจอ (canvas) */
  --panel:      #FFFFFF;   /* การ์ดและแผง */
  --soft:       #F3F2EE;   /* พื้นรอง หัวตาราง คอลัมน์บอร์ด */
  --line:       #E0DFD9;   /* เส้นขอบ */
  --line-soft:  #EDECE7;   /* เส้นคั่นในตาราง */

  /* ---- สีสื่อความหมาย ---- */
  --sage:       #9CC2AC;   /* เส้นใต้แท็บที่เลือก ป้ายเลขชิ้นงาน ช่องที่กรอกค่าแก้แล้ว */
  --sage-soft:  #E4EFE8;   /* พื้นป้ายสถานะพร้อมส่ง */
  --royal:      #2C3B73;   /* ขั้นกำลังแก้ ป้ายงานที่เปิดอยู่ */
  --gold:       #C9A85C;   /* ขั้นตรวจ QC ไฮไลต์คำค้น */
  --thread:     #2E6B4F;   /* ผ่าน QC ปุ่มยืนยัน */
  --pin:        #A33A30;   /* เกินกำหนด ค่าเกินเพดาน ห้ามทำ */

  /* ---- ช่องกรอกจุดวัด ---- */
  --cell:       #F1F0EB;   /* ช่องค่าเดิม */
  --edit:       #E9F0EB;   /* ช่องกรอกส่วนต่าง */

  /* ---- สีตามขั้นสถานะ (Handoff หัวข้อ 2 — 6 ขั้น ตัด delivered ออกแล้ว) ---- */
  --s-received: #A8B3AC;   /* รับงาน */
  --s-queued:   #9CC2AC;   /* รอแก้ */
  --s-sewing:   #2C3B73;   /* กำลังแก้ */
  --s-qc:       #C9A85C;   /* ตรวจ QC */
  --s-ready:    #2E6B4F;   /* พร้อมส่ง */
  --s-closed:   #1E2A24;   /* ปิดงาน */

  /* ---- แบรนด์ (แถบเมนูข้าง หน้าล็อกอิน) — เขียวผ้าทอเข้ม เข้ากับ --ink ---- */
  --brand:      #17281F;   /* พื้นแถบเมนู */
  --brand-2:    #20372B;   /* พื้นเมนูที่ชี้ / เลือก */
  --brand-ink:  #DCE7E0;   /* ตัวอักษรบนพื้นแบรนด์ */
  --brand-mute: #8FA79A;   /* ตัวอักษรรองบนพื้นแบรนด์ */
  --accent:     #2E6B4F;   /* ปุ่มหลัก = สีด้ายเขียว (--thread) */

  /* ---- รูปทรง ---- */
  /* ปรับจาก mockup (10/9/8px) ให้โค้งขึ้นเล็กน้อยตามหน้าจอรุ่นปัจจุบัน */
  --r:          14px;      /* รัศมีการ์ดมาตรฐาน */
  --r-sm:       11px;      /* การ์ดย่อย แถวผลค้นหา */
  --r-field:    10px;      /* ช่องกรอก */
  --shadow:     0 1px 2px rgba(23,40,31,.04), 0 4px 18px -6px rgba(23,40,31,.10);
  --shadow-lg:  0 2px 4px rgba(23,40,31,.05), 0 18px 40px -12px rgba(23,40,31,.22);

  /* ---- ระยะ ---- */
  /* [เพิ่มใหม่] mockup ใช้ค่า px ตรง ๆ ชุดนี้จัดระเบียบให้เพื่อให้ทีมใช้อ้างอิงได้ */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 22px;
  --sp-7: 32px;

  /* ---- ขนาดตัวอักษร ---- */
  --fs-body:   15px;       /* ฐาน */
  --fs-sm:     .86rem;     /* ข้อความรอง ปุ่มเล็ก */
  --fs-xs:     .78rem;     /* ป้าย pill หัวตาราง */
  --fs-h1:     2rem;       /* หัวข้อหน้า น้ำหนัก 300 */
  --fs-h2:     1.02rem;    /* หัวข้อส่วน น้ำหนัก 600 */
  --fs-num:    1.7rem;     /* ตัวเลข KPI น้ำหนัก 300 */

  /* ---- ระยะกดขั้นต่ำสำหรับหน้างานมือถือ (Handoff 6.2) ---- */
  --tap: 44px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:        #E9EFEA;
    --ink-2:      #C2CCC5;
    --muted:      #8A958E;

    --bg:         #101511;
    --panel:      #18211C;
    --soft:       #1C2520;
    --line:       #2B352E;
    --line-soft:  #222B25;

    --sage:       #9CC2AC;
    --sage-soft:  #22302A;
    --royal:      #7488C9;
    --gold:       #D6B76E;
    --thread:     #6BBF95;
    --pin:        #DE7A6E;

    --cell:       #1D2621;
    --edit:       #1E2A23;

    --s-received: #76827B;
    --s-queued:   #9CC2AC;
    --s-sewing:   #7488C9;
    --s-qc:       #D6B76E;
    --s-ready:    #6BBF95;
    --s-closed:   #E9EFEA;

    --shadow:     none;
    --brand:      #0C130F;
    --brand-2:    #18241D;
    --brand-ink:  #DCE7E0;
    --brand-mute: #7F978A;
    --accent:     #3F8A66;
    --shadow-lg:  0 18px 40px -12px rgba(0,0,0,.6);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ink:        #E9EFEA;
  --ink-2:      #C2CCC5;
  --muted:      #8A958E;

  --bg:         #101511;
  --panel:      #18211C;
  --soft:       #1C2520;
  --line:       #2B352E;
  --line-soft:  #222B25;

  --sage:       #9CC2AC;
  --sage-soft:  #22302A;
  --royal:      #7488C9;
  --gold:       #D6B76E;
  --thread:     #6BBF95;
  --pin:        #DE7A6E;

  --cell:       #1D2621;
  --edit:       #1E2A23;

  --s-received: #76827B;
  --s-queued:   #9CC2AC;
  --s-sewing:   #7488C9;
  --s-qc:       #D6B76E;
  --s-ready:    #6BBF95;
  --s-closed:   #E9EFEA;

  --shadow:     none;
  --brand:      #0C130F;
  --brand-2:    #18241D;
  --brand-ink:  #DCE7E0;
  --brand-mute: #7F978A;
  --accent:     #3F8A66;
  --shadow-lg:  0 18px 40px -12px rgba(0,0,0,.6);

  color-scheme: dark;
}