/* ============================================================
   tokens.css — ค่ากลางของดีไซน์ทั้งระบบ (สี / ระยะ / ฟอนต์ / มุมโค้ง / เงา)
   แก้ที่ไฟล์นี้ที่เดียวเพื่อเปลี่ยนหน้าตาทั้งเว็บ
   ธีม: น้ำเงินโลโก้/คอบอลต์แบนเนอร์ (navy) เป็นสีปุ่มหลัก + ฟ้าขอบเสื้อ (sky) เป็นสีเน้น + เทาเงินตามแผ่นซีลายน์เป็นพื้นหลัง
   ฟอนต์: ฟอนต์ระบบของเครื่อง (Segoe UI / Leelawadee UI / Noto Sans Thai) ตามหน้าตาเดิม ไม่โหลดฟอนต์จากภายนอก
   ============================================================ */

:root {
  color-scheme: light;

  /* --- ฟอนต์ --- */
  --font: "Segoe UI", system-ui, -apple-system, "Leelawadee UI", "Noto Sans Thai", "Sarabun", Tahoma, Roboto, sans-serif;
  --fs-base: 16px;          /* มือถือปรับเป็น 17px ใน components.css */
  --fs-sm: .875rem;
  --fs-xs: .78rem;
  --fs-h1: 1.45rem;
  --fs-h2: 1.08rem;
  --fs-h3: 1rem;
  --lh: 1.65;
  --lh-tight: 1.35;

  /* --- สีแบรนด์ --- */
  --navy: #2545A0;
  --navy-dark: #172C74;
  --navy-600: #3051B2;
  --sky: #4FA8DD;
  --sky-600: #2E8CC4;
  --sky-soft: #E4EFFA;
  --logo-blue: #2B62A6;

  /* --- พื้นผิว --- */
  --bg: #EEF0F3;
  --surface: #FFFFFF;
  --surface-2: #F7F8FA;
  --line: #DADDE3;
  --line-strong: #C4C9D2;

  /* --- ตัวอักษร --- */
  --text: #1B2233;
  --text-2: #3E4655;
  --muted: #586071;          /* ตัดกับ #fff ≥ 5.2:1 (WCAG AA) */
  --on-brand: #FFFFFF;

  /* --- สีสถานะ (โทนอ่อน พื้นจาง + ตัวเข้ม แยกชัดจากสีแบรนด์) --- */
  --green: #1A7440;   --green-bg: #E6F5EC;   --green-line: #BFE2CD;
  --amber: #B7791F;   --amber-bg: #FFF4D9;   --amber-text: #7A4F00;  --amber-line: #F3DDA1;
  --red: #C62828;     --red-bg: #FDECEC;     --red-line: #F4C4C4;
  --blue-bg: #E8F3FB; --blue-text: #1F5F8E;  --blue-line: #BFDDF1;
  --gray-bg: #ECEEF2; --gray-text: #495160;  --gray-line: #D5D9E0;

  /* --- ระยะ / มุมโค้ง / เงา --- */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(23, 44, 116, .05);
  --shadow: 0 1px 2px rgba(23, 44, 116, .04), 0 4px 14px rgba(23, 44, 116, .05);
  --shadow-lg: 0 10px 28px rgba(23, 44, 116, .12);
  --focus: 0 0 0 3px rgba(79, 168, 221, .45);

  /* --- ขนาด layout --- */
  --topbar-h: 58px;          /* แถบบนสีน้ำเงิน 55px + เส้นฟ้า 3px */
  --page-w: 1280px;          /* เนื้อหากลางจอ: 1152px + ขอบข้างละ 16px */
  --tap: 48px;               /* ขนาดปุ่มกดขั้นต่ำ */
  --ease: 150ms ease;

  /* --- สีประจำโมดูล (โทนน้ำเงิน/ฟ้าตามธีมเดิม ใช้เป็นจุดสี/ไอคอน) --- */
  --mod-marketing: #2B62A6;
  --mod-hr: #172C74;
  --mod-stock: #2E8CC4;
  --mod-accounting: #1F5F8E;
  --mod-me: #586071;
  --mod-admin: #586071;
}