/*
  Design token ของทั้งระบบ  สี ขนาดตัวอักษร ระยะห่าง มุมโค้ง และเงา อยู่ที่ไฟล์นี้ที่เดียว
  เปลี่ยนสีหลักของระบบ = แก้ --color-primary บรรทัดเดียว ทุกปุ่ม ทุกตาราง ทุกหน้าเปลี่ยนตาม
  ห้ามเขียนรหัสสีตรง ๆ ในไฟล์ CSS ของหน้าใดหน้าหนึ่ง
*/

:root {
  /* โทนฟ้าเขียวของระบบเดิม  ตัวอักษรสีขาวบนปุ่มมีค่าความต่างสีผ่านเกณฑ์ WCAG AA */
  --color-primary: #0891b2;
  --color-primary-hover: #0e7490;
  --color-primary-soft: #cffafe;
  --color-primary-text: #164e63;

  /* จุดสถานะและงานตกแต่งที่ต้องการสีเขียวอมฟ้าตัดกับฟ้าหลัก */
  --color-accent: #14b8a6;

  /* ใช้เป็นสีของเงาทุกก้อน เขียนเป็นค่า rgb ล้วนเพื่อใส่ความโปร่งใสตอนใช้งาน */
  --shadow-color: 8 145 178;

  --color-danger: #dc2626;
  --color-danger-text: #b91c1c;
  --color-danger-soft: #fef2f2;
  --color-danger-border: #fee2e2;
  --color-success: #16a34a;
  --color-warning: #d97706;

  --color-bg: #f4fbfc;
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;
  --color-border: #cfe7ea;
  --color-border-strong: #a9ced4;

  --color-text: #1f2937;
  --color-text-strong: #0f172a;
  /* หัวข้อของการ์ด  เข้มกว่าตัวอักษรทั่วไปแต่ไม่ดำเท่า --color-text-strong */
  --color-text-heading: #334155;
  --color-text-soft: #475569;
  --color-text-muted: #64748b;
  --color-text-faint: #94a3b8;

  /* พื้นและเส้นของการ์ดทุกใบ  เส้นคั่นในการ์ดอ่อนกว่าเส้นขอบนอกหนึ่งขั้น */
  --color-surface-subtle: #fbfdfe;
  /* พื้นอ่อนที่ยังเห็นว่าต่างจากขาว ใช้กับแถวที่ชี้อยู่และกล่องรองในการ์ด */
  --color-surface-tint: #f2fafb;
  --color-border-soft: #e3edef;
  --color-divider: #edf3f4;
  --shadow-card: 0 4px 18px rgb(15 23 42 / 0.03);

  /* เงินเข้าและเงินออก  ใช้คู่นี้ทุกที่ที่ตัวเลขมีทิศทาง ไม่ใช่เขียวแดงคนละเฉดต่อหน้า */
  --color-money-in: #078a68;
  --color-money-out: #c2415d;

  /* สีตั้งต้นของการ์ดที่ยังไม่ได้เลือกสี  ตัวแรกของจานสีการ์ดใน color-picker.js */
  --color-card-fallback: #8ecbd6;

  /* ฟ้าเขียวที่อ่อนกว่าสีหลัก  ใช้กับตัวเลขและป้ายที่ไม่ควรดังเท่าปุ่ม */
  --color-primary-muted: #32a3b5;

  --scrollbar-thumb: #c3dee3;
  --scrollbar-thumb-hover: #a3ccd4;

  --font-family: "Noto Sans Thai", "Inter", "Leelawadee UI", system-ui, sans-serif;

  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 28px;

  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 26px;
  --radius-full: 999px;

  /*
    มุมโค้งตามบทบาทของกล่อง  หน้าไหนก็หยิบสี่ค่านี้ไปใช้ ไม่ต้องเดาเลขเอง
    เดิมแต่ละหน้าเขียนเลขของตัวเอง ตั้งแต่ 6 ถึง 24 การ์ดข้างกันจึงโค้งไม่เท่ากัน
  */
  --radius-hero: 22px;  /* กล่องใหญ่สุดของหน้า เช่น แถบหัวเรื่อง สถานะว่าง กล่องโมดัลใหญ่ */
  --radius-card: 16px;  /* การ์ดและกลุ่มรายการ */
  --radius-panel: 12px; /* กล่องย่อยในการ์ด แถวรายการ ช่องกรอก */
  --radius-chip: 8px;   /* ป้าย ปุ่มไอคอน ของเล็ก ๆ ในแถว */

  --control-height: 48px;
  --control-height-sm: 36px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05);
  --shadow-md: 0 4px 12px rgb(15 23 42 / 0.08);
  --shadow-lg: 0 18px 45px rgb(var(--shadow-color) / 0.12);

  --transition-fast: 140ms ease;
  --transition-base: 200ms ease;

  /* เส้นโค้งของการเคลื่อนไหวทั้งระบบ ออกเร็วแล้วค่อย ๆ หยุด ให้ความรู้สึกลื่นไม่กระตุก */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);

  --sidebar-width: 264px;
  /* ความสูงของแถบหัวจอแคบ ซึ่งเป็นที่อยู่ของปุ่มเปิดเมนู */
  --mobile-nav-height: 64px;
}