/* ============================================================================
   Wealthy Creation — Design System: COLOR TOKENS (canonical source of truth)
   ----------------------------------------------------------------------------
   นี่คือ SOURCE OF TRUTH ของสีทั้งระบบ (ทุก service: portal, pm_service,
   procurement_service, hr_service) — ห้ามแก้สำเนาใน app/static/design/tokens.css
   ของแต่ละ service โดยตรง ให้แก้ที่ไฟล์นี้ที่เดียว แล้วรัน:
       python "IMS (implement)/build/phaseB1/design_system/sync_design.py"
   เพื่อ copy ค่าใหม่เข้าไปทุก service (แพทเทิร์น copy-ไม่-import ที่ repo นี้ใช้อยู่แล้ว
   เพราะแต่ละ service deploy ด้วย --source . จากโฟลเดอร์ตัวเอง แยกกันอิสระ)

   มติ 11 ส.ค. 2569: ธีมคุมด้วย data-theme + localStorage เท่านั้น — ห้ามมี media query ที่ตรวจ
   โหมดสีของระบบปฏิบัติการผูกกับ selector ใดๆ ในไฟล์นี้เด็ดขาด (มี regression test คุมที่ portal
   และ test_design_system.py ในโฟลเดอร์นี้เช็คซ้ำอีกชั้น)
   ============================================================================ */

/* WC Portal — design tokens: "ดำ-ชมพู" brand theme (มติเจ้าของ D-32 ข้อ 6, 27 ส.ค. 2569) แทนที่ theme
   "น้ำเงินกรมท่า" (#1F3A5F, มติ 11 ส.ค. 2569) เดิม — ยังคง "ชื่อ" ตัวแปรเดิมทั้งหมด (--ground, --ground-raised,
   --ink, --line, --accent, --steel, --signal-*) เพราะโมดูลอื่นๆทั้งหมด (dashboard/procurement/hr/ฯลฯ)
   อ้างอิงตัวแปรเหล่านี้อยู่ทั่วทั้งระบบ — เปลี่ยน "ค่า" ให้เป็นโทนใหม่ที่นี่ที่เดียว ทุกหน้าที่ไม่ได้แก้เทมเพลตก็ได้
   หน้าตาใหม่ไปด้วยอัตโนมัติ โดยไม่ต้องไล่แก้ทุกไฟล์
   27 ส.ค. 2569 (มติเจ้าของ D-32 ข้อ 6): เปลี่ยนจากน้ำเงินกรมท่า (#1F3A5F) เป็น **ดำ-ชมพู `#C2117A`** ตามสีจริง
   ของโลโก้บริษัท — light mode พื้นขาวอมชมพูอ่อน `#FCF6F9` + การ์ดขาวล้วน เงาโทนชมพู, dark mode พื้นดำอมม่วงเข้ม
   `#0F0A10`/`#1B1420` — ค่าตรงตาม mockup ที่เจ้าของเคาะแล้ว (`design_system/mockups/wc_portal_ui_v2.html`)
   สี signal (แดง/เหลือง/เขียว) **ไม่แตะ** ยังคงความหมายเดิมตามมติ ถ้าจะสลับสีหลักภายหลัง แก้ --primary ค่าเดียวจบ
   (--accent ผูกกับ --primary อยู่แล้ว) */
:root{
  --primary:#C2117A;
  --primary-soft:#FBE0EF;
  --bg:#FCF6F9;
  --surface:#FFFFFF;
  --r:14px; --r-sm:10px;
  --pill-green:#2E7D4F; --pill-purple:#7C5068; --pill-red:#C0392B; --pill-gray:#8A94A0;

  --ground: var(--bg);
  --ground-raised: var(--surface);
  --ink:#241922;
  --ink-soft:#8A6B7C;
  --line:#EFDCE6;
  --accent: var(--primary);
  --accent-ink:#FFFFFF;
  --accent-soft: var(--primary-soft);
  --signal-green: var(--pill-green);
  --signal-green-soft:#E5F3EA;
  --signal-amber:#A6720A;
  --signal-amber-soft:#FBF0D8;
  --signal-red: var(--pill-red);
  --signal-red-soft:#FBEAE8;
  --steel: var(--pill-purple);
  --steel-soft:#F1E3EC;
  --shadow: 0 1px 2px rgba(150,17,122,.07), 0 4px 14px rgba(150,17,122,.08);
  --font-display: var(--font-body);
  --font-body:"Noto Sans Thai","Leelawadee UI","Segoe UI",system-ui,-apple-system,sans-serif;
  /* 11 ส.ค. 2569 (เจอตอนทดสอบ theme toggle จริง): --accent/--primary และ --steel เป็นสีคงที่ไม่สลับตามธีม
     โดยตั้งใจ (แบรนด์กรมท่าเดียวต้องเหมือนกันทุกธีม) แต่พอถูกใช้เป็น "สีตัวอักษร" บนพื้นผิวที่สลับเข้มตามธีม
     (--surface/--ground-raised/--accent-soft/--steel-soft) จะจมพื้นในโหมดมืด (กรมท่าเข้ม/บนกรมท่าเข้มกว่า)
     เพิ่ม token คู่นี้ไว้ใช้เฉพาะกรณี "ตัวอักษรบนพื้นผิว" โดยเฉพาะ (ค่าเริ่มต้น light = เท่าตัวเดิมเป๊ะ ไม่มีผล
     กับหน้าตาเดิม) ส่วนจุดที่ --accent/--steel ทำหน้าที่เป็นพื้นหลังของปุ่ม/pill ที่จับคู่กับ --accent-ink/สีขาว
     คงที่อยู่แล้วไม่ต้องแก้ (คอนทราสต์ดีอยู่แล้วทั้งสองธีม) */
  --accent-on-surface: var(--primary);
  --steel-on-surface: var(--steel);
}

/* 11 ส.ค. 2569 (มติเจ้าของ อัปเดตสเปกล่าสุด — theme toggle ให้ user เลือกเอง แทนที่มติ "บังคับสว่างอย่างเดียว"
   รอบก่อนหน้า): พื้นเริ่มต้นของทุกเครื่องต้องเป็น clean light เสมอไม่ว่า OS จะตั้งโหมดมืดหรือไม่ก็ตาม — จึงไม่มี
   media query ที่ตรวจโหมดสี OS ผูกกับ root selector เปล่าอีกต่อไป (ตัดออกแล้วจริง ไม่ใช่แค่คอมเมนต์ทิ้ง — เคย
   ทำให้เครื่อง OS ตั้งโหมดมืดเห็น Portal เป็นกรมท่าเข้มเองโดยไม่ได้กดอะไรเลย ซึ่งขัดมติ) ธีมมืดใช้ได้เฉพาะตอน
   ผู้ใช้กดปุ่ม toggle ตั้งแอตทริบิวต์ data-theme="dark" บน html ตรงๆ + จำค่าไว้ใน localStorage key "wc_theme" —
   selector root[data-theme="dark"] ด้านล่างนี้คือชุดค่า navy-slate เดียวกับที่เคยอยู่ใต้ media query เดิมทุกค่า
   (ย้ายมาเฉยๆ ไม่ได้เปลี่ยนสี) ส่วน root[data-theme="light"] เผื่อไว้ให้ toggle สลับกลับจาก dark ได้ชัดเจน
   (ไม่ต้องพึ่ง fallback ไปหา root เปล่าซึ่งเป็น light อยู่แล้วก็จริง แต่ explicit ไว้กันสับสน) */
:root[data-theme="dark"]{
  --bg:#0F0A10; --surface:#1B1420; --primary-soft:#3A1B2E;
  --ground:#0F0A10; --ground-raised:#1B1420; --ink:#F3E7EE; --ink-soft:#B08A9D; --line:#3A2530;
  --accent-soft: var(--primary-soft);
  --signal-green-soft:#173226; --signal-amber-soft:#3A2C11; --signal-red-soft:#3A1E1A; --steel-soft:#33202C;
  --shadow: 0 6px 24px rgba(0,0,0,.55);
  /* text-on-surface ที่สว่างพอให้อ่านออกบนพื้นดำอมชมพูเข้ม (ดูคอมเมนต์ต้นไฟล์ตรง :root เรื่อง --accent-on-surface) */
  --accent-on-surface:#F17FBE;
  --steel-on-surface:#C99BB2;
}
:root[data-theme="light"]{
  --bg:#FCF6F9; --surface:#FFFFFF; --primary-soft:#FBE0EF;
  --ground:#FCF6F9; --ground-raised:#FFFFFF; --ink:#241922; --ink-soft:#8A6B7C; --line:#EFDCE6;
  --accent-soft: var(--primary-soft);
  --signal-green-soft:#E5F3EA; --signal-amber-soft:#FBF0D8; --signal-red-soft:#FBEAE8; --steel-soft:#F1E3EC;
  --shadow: 0 1px 2px rgba(150,17,122,.07), 0 4px 14px rgba(150,17,122,.08);
  --accent-on-surface: var(--primary);
  --steel-on-surface: var(--steel);
}