/* ============================================================
   IT-WMS — Design Tokens (04-UI-SITEMAP.md §4)
   ยกมาจากต้นแบบที่อนุมัติแล้ว (prototype/assets/css/tokens.css)
   โดยตัดส่วนที่เป็นของต้นแบบล้วน ๆ ออก (แถบ PROTOTYPE)

   ⛔ ห้าม hard-code สี/ระยะห่างในไฟล์ CSS อื่น ทุกค่าต้องมาจากที่นี่
   ============================================================ */

:root {
  /* ---------- 1. Neutral / Surface ---------- */
  --c-bg:            #f4f6f8;   /* พื้นหลังหน้า */
  --c-surface:       #ffffff;   /* พื้นการ์ด/ตาราง */
  --c-surface-2:     #f9fafb;   /* แถวสลับ / หัวตาราง */
  --c-surface-3:     #eef1f4;   /* พื้น hover / chip */
  --c-border:        #e3e7ec;   /* เส้นขอบปกติ */
  --c-border-strong: #c9d1da;   /* เส้นขอบเน้น / input */
  --c-text:          #1b2027;   /* ตัวอักษรหลัก */
  --c-text-2:        #59636f;   /* ตัวอักษรรอง */
  --c-text-3:        #8b95a1;   /* ตัวอักษรจาง / placeholder */
  --c-text-invert:   #ffffff;

  /* ---------- 2. Action (ใช้จุดเดียว: การกระทำหลัก + เมนู active) ----------
     ⚠ นี่คือ **สีการกระทำของ UI ไม่ใช่สีบริษัท** — สีบริษัทอยู่กลุ่ม `--brand-*` (ข้อ 13) */
  --c-brand:      #2b5cd9;
  --c-brand-dark: #1e46ac;
  --c-brand-weak: #e9f0fd;

  /* ---------- 3. Semantic — Priority ----------
     ⛔ สี่ค่านี้ "แปลว่าระดับความสำคัญ" ห้ามยืมไปใช้เป็นสีแบรนด์/สีตกแต่ง */
  --c-critical:    #d92d20;  --c-critical-bg: #fdecea;  /* Critical = แดง */
  --c-high:        #d96a00;  --c-high-bg:     #fdf1e2;  /* High     = ส้ม */
  --c-medium:      #a97a06;  --c-medium-bg:   #fdf6e0;  /* Medium   = เหลือง */
  --c-low:         #5b6672;  --c-low-bg:      #eef1f4;  /* Low      = เทา */

  /* ---------- 4. Semantic — Status ---------- */
  --c-done:      #10794f;  --c-done-bg:    #e5f4ec;  /* Done    = เขียว */
  --c-blocked:   #8a1c14;  --c-blocked-bg: #f9dfdc;  /* Blocked = แดงเข้ม */
  --c-progress:  #2b5cd9;  --c-progress-bg:#e9f0fd;  /* In Progress */
  --c-waiting:   #a97a06;  --c-waiting-bg: #fdf6e0;  /* Waiting */
  --c-review:    #6b4fc4;  --c-review-bg:  #efeafb;  /* Review */
  --c-neutral:   #59636f;  --c-neutral-bg: #eef1f4;  /* Backlog/Todo/Planned/Cancelled */

  /* ---------- 5. Typography ---------- */
  --font-sans: "Segoe UI", "Sarabun", "Noto Sans Thai", "Leelawadee UI",
               system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", "Roboto Mono", monospace;

  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-md:  13px;   /* ตารางหนาแน่น */
  --fs-base:14px;   /* ค่ามาตรฐานของ body */
  --fs-lg:  16px;
  --fs-xl:  18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-4xl: 34px;   /* ตัวเลขสำคัญบนการ์ดสถิติ — ต้องเด่นกว่าคำอธิบายชัดเจน (U-55) */

  --lh-tight: 1.25;
  --lh-base:  1.55;  /* ภาษาไทยมีสระบน-ล่าง ต้องการ line-height สูงกว่าอังกฤษ */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ---------- 6. Spacing (4px grid) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10:40px;

  /* ---------- 7. Radius ---------- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-pill: 999px;

  /* ---------- 8. Shadow ---------- */
  --sh-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-md: 0 2px 6px rgba(16, 24, 40, .07);
  --sh-lg: 0 12px 32px rgba(16, 24, 40, .16);

  /* ---------- 9. Layout ---------- */
  --topbar-h:   56px;
  --sidebar-w:  232px;
  --sidebar-w-collapsed: 62px;
  --content-max: 1560px;

  /* ---------- 10. Motion ---------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* ---------- 11. Z-index ---------- */
  --z-sidebar: 40;
  --z-topbar: 30;
  --z-drawer: 70;
  --z-modal: 80;
  --z-toast: 90;

  /* ---------- 12. สีของโครง shell (ใช้ทาสีตั้งแต่เฟรมแรก) ---------- */
  --c-sidebar-bg:   #1c222b;
  --c-sidebar-line: #2a323d;
  --c-sidebar-hover:#262e39;
  --c-sidebar-text: #cfd6de;
  --c-sidebar-dim:  #6e7987;
  --c-sidebar-skel: #262e39;
  --c-skeleton:     #e7ebef;  /* พื้นที่รอเนื้อหา — สีเดียวกับพื้นแอป ไม่ใช่ขาว */

  /* ============================================================
     13. BRAND — สีของบริษัท wanwanach (U-13)
     ------------------------------------------------------------
     ตั้งชื่อขึ้นต้น `--brand-` โดยตั้งใจ เพื่อให้ **แยกจากสีความหมาย** ได้ทั้งด้วยตา
     และด้วยสคริปต์ (มีเทสล็อกไว้ที่ tests/unit/frontend.rules.test.js)

     ✅ ใช้ `--brand-*` ได้ที่:
        โลโก้ · favicon · เส้นคาดบนแถบหัวเว็บ (topbar) · หน้า Login/เปลี่ยนรหัสผ่าน
        · หัวกระดาษของรายงานตอนสั่งพิมพ์ (@media print — หน้ารายงานจริงมาใน Phase 5)
     ⛔ ห้ามใช้ `--brand-*` ที่:
        badge/ชิปสถานะ · ชิปความสำคัญ · progress bar · แถบ Load %/Utilization %
        · สีในกราฟที่แทนสถานะ · ปุ่มทั่วไปในหน้าเนื้อหา (Save/ยืนยัน/ตัวกรอง)
        เหตุผล: **ส้ม = ความสำคัญ High (`--c-high`)** ถ้าปุ่ม/ชิปทั่วไปเป็นส้มด้วย
        ผู้ใช้จะแยกงาน High ไม่ออก
     ⛔ กลับกัน: ห้ามเอา `--c-high` ไปใช้เป็นสีแบรนด์ — คนละความหมาย ห้ามสลับกัน

     ค่าสีดูดมาจากไฟล์โลโก้จริง (ไม่ได้เดา) · เฉดเข้มคำนวณให้ผ่าน WCAG AA (วัดจริง):
        --brand-strong บนพื้นขาว        = 5.29:1  (ต้องการ ≥4.5:1) ✓
        ขาวบน --brand-strong            = 5.29:1  ✓  (ปุ่มเข้าสู่ระบบ)
        --brand-strong บน --c-surface-3 = 4.67:1  ✓  (พื้นสว่างที่เข้มสุดของระบบ)
        --brand-on-deep บน --brand-deep = 8.70:1  ✓
        ขาวบน --brand-deep              = 9.06:1  ✓
        --brand-primary บนพื้นขาว       = 2.78:1  ✗ → **เส้นตกแต่งเท่านั้น ห้ามใช้กับตัวอักษร**
     ============================================================ */
  --brand-primary: #f47820;  /* ส้มของโลโก้ — งานกราฟิก/เส้นคาด (ห้ามใช้กับตัวอักษร) */
  --brand-strong:  #af5000;  /* เฉดเข้ม — ตัวอักษร/ปุ่มสีแบรนด์ (ผ่าน AA ทุกพื้นสว่างของระบบ) */
  --brand-deep:    #7a3400;  /* พื้นเข้มของแบรนด์ (แผงซ้ายหน้า Login) */
  --brand-on-deep: #fdfcdf;  /* ครีมของขอบโลโก้ — ตัวอักษรบนพื้น --brand-deep */
  --brand-gold:    #efd989;  /* ทองของลายเส้นในโลโก้ */
  --brand-weak:    #f9e7d8;  /* พื้น/วงแหวนโฟกัสอ่อน ๆ ของหน้า auth (ตกแต่ง) */
  /* หัวกระดาษรายงานตอนพิมพ์ (Phase 5) — ประกาศล่วงหน้าให้ทุกหน้าใช้ค่าเดียวกัน */
  --brand-print-rule: var(--brand-strong);

  /* ขนาดแสดงผลของโลโก้ (คุมที่นี่ที่เดียว — ไฟล์ภาพใหญ่กว่าเพื่อความคมบนจอ retina) */
  --logo-h-sidebar:           40px;   /* แถวแบรนด์สูง var(--topbar-h) = 56px */
  --logo-h-sidebar-collapsed: 26px;   /* ตอน sidebar ยุบเหลือ 62px */
  --logo-w-login:            208px;
}

/* ============================================================
   BASE PAINT — กันจอ "กระพริบขาว" ตอนเปลี่ยนหน้า (§3.3 ข้อ 1)
   สถาปัตยกรรมเป็น multi-page ไม่มี build step ไม่มี SPA router
   ระหว่างสลับเอกสาร เบราว์เซอร์ทาสี canvas จาก root element ก่อน body
   ถูก parse — ถ้าไม่ประกาศไว้ที่ระดับ html จะเป็นสีขาวแวบทุกครั้งที่กดเมนู
   ============================================================ */
html {
  background-color: var(--c-bg);
  color: var(--c-text);
  color-scheme: light;  /* กัน UA วาดพื้น/scrollbar สีตรงข้ามในโหมดมืด */
}
body { background-color: var(--c-bg); color: var(--c-text); }