/* ============================================================================
 * KanomJeen · Unturned Dashboard — Design Tokens
 * v2.0 "navy game-admin" (2026-09-16) — ถอดจาก KanomJeen-UIUX-Asset-Pack
 * v2.1 (2026-09-16) — เพิ่มพาเลตต์ดำ–เทา "ink" (ข้อ 1b) เป็นทางเลือกสำรอง
 *
 * เปลี่ยนจาก v1: ทิ้งธีมเขียว "ใบเตย" แล้วใช้พาเลตต์ navy game-admin ของแพ็กใหม่
 * (ดูของเดิมได้ที่ tokens/design-tokens.v1-green.css.bak)
 *
 * โครงไฟล์:
 *   1. พาเลตต์ดิบของแพ็ก  — ใช้ชื่อเดิมจาก 03-design-system/design-tokens.json
 *   1b. พาเลตต์ดำ–เทา "ink" — neutral ล้วน (R≈G≈B) ยังไม่ผูกใช้
 *   2. Semantic aliases   — ชื่อตัวแปรที่แดชบอร์ด/ธีมเรียกใช้ (--kj-bg, --kj-surface ...)
 *   3. Typography / Spacing / Radius / Elevation / Layout / Motion / Icons / Z-index
 *
 * วิธีใช้: <link rel="stylesheet" href="tokens/design-tokens.css">
 *         แล้วอ้าง var(--kj-*) ในโค้ดของตัวเอง (ค่าดิบอยู่ในข้อ 1)
 * ========================================================================= */

:root {
  /* ---------- 1. พาเลตต์ดิบจากแพ็ก v2.0 --------------------------------- */
  --kj-navy-950: #041326;  /* พื้นหลังแอป */
  --kj-navy-900: #061c33;
  --kj-navy-850: #082744;  /* การ์ด/แถว */
  --kj-navy-800: #0b3151;  /* การ์ดด้านสว่าง (gradient ปลายทาง) */
  --kj-navy-700: #12466c;  /* เส้นขอบ */
  --kj-blue-500: #2b63e8;  /* ปุ่มหลัก/เมนูที่เลือก */
  --kj-blue-400: #3e7bff;  /* hover/โฟกัส */
  --kj-teal-500: #00a9a5;
  --kj-teal-400: #13c7bc;
  --kj-green-500: #00c86b;  /* Start / สำเร็จ */
  --kj-green-400: #24e18b;
  --kj-gold-500: #f5a623;   /* คำเตือน */
  --kj-orange-500: #f76b1c;
  --kj-red-500: #f0444e;    /* Stop / ผิดพลาด */
  --kj-white: #ffffff;
  --kj-gray-100: #f3f6fa;
  --kj-gray-300: #c8d2df;
  --kj-gray-500: #7e8fa3;
  --kj-gray-700: #40546a;

  /* ---------- 1b. พาเลตต์ดำ–เทา "ink" (เพิ่มเติมนอกแพ็ก v2) --------------
     แพ็กมีแต่เทาติดฟ้า 4 ตัว (gray-100/300/500/700) ไม่มีเทากลาง ๆ ที่เป็นกลาง
     ชุดนี้เป็น neutral ล้วน (R≈G≈B) 12 ขั้น พอสำหรับพื้น/การ์ด/ขอบ/ข้อความ
     ยังไม่ผูกกับ semantic ข้อ 2 — แดชบอร์ดจึงยังเป็น navy เหมือนเดิม
     วิธีสลับทั้งแอปไปโทนดำ–เทา: ดู README หัวข้อ "พาเลตต์ดำ–เทา (ink)"
     -------------------------------------------------------------------- */
  --kj-ink-950: #0b0b0c;  /* พื้นหลังแอป (ดำสนิท) */
  --kj-ink-900: #101012;  /* พื้นหลังส่วนลึก/แถบข้าง */
  --kj-ink-850: #151517;  /* การ์ด/แถว */
  --kj-ink-800: #1c1c20;  /* การ์ดด้านสว่าง (ปลาย gradient) */
  --kj-ink-700: #2a2a2e;  /* เส้นขอบ */
  --kj-ink-600: #3a3a40;  /* เส้นขอบเน้น / hover */
  --kj-ink-500: #55555c;  /* ข้อความจางสุด */
  --kj-ink-400: #7a7a83;  /* ข้อความรอง */
  --kj-ink-300: #a8a8b0;  /* ข้อความทั่วไป */
  --kj-ink-200: #cfcfd4;  /* ข้อความหลัก */
  --kj-ink-100: #e8e8ea;  /* ข้อความเน้น (near-white) */
  --kj-ink-50:  #f5f5f6;  /* พื้นอ่อนสุด (hover บนปุ่มเทา) */

  /* ---------- 2. Semantic (ชื่อเดิมที่แดชบอร์ดเรียกใช้) ------------------- */
  --kj-bg:            var(--kj-navy-950);
  --kj-bg-deep:       #030d1a;
  --kj-surface:       var(--kj-navy-850);
  --kj-surface-2:     var(--kj-navy-800);
  --kj-border:        var(--kj-navy-700);
  --kj-border-strong: #1c5b8c;

  --kj-text:           #eaf2fb;
  --kj-text-dim:       var(--kj-gray-300);
  --kj-text-muted:     var(--kj-gray-500);
  --kj-text-on-accent: #ffffff;

  --kj-accent:        var(--kj-blue-400);
  --kj-accent-hover:  #5b90ff;
  --kj-accent-press:  var(--kj-blue-500);
  --kj-accent-soft:   rgba(62, 123, 255, .16);
  --kj-accent-line:   rgba(62, 123, 255, .45);

  --kj-secondary:       var(--kj-navy-800);
  --kj-secondary-hover: var(--kj-navy-700);
  --kj-secondary-soft:  rgba(245, 166, 35, .14);

  --kj-success: var(--kj-green-400);
  --kj-online:  var(--kj-green-400);
  --kj-offline: #5a6c80;
  --kj-warning: var(--kj-gold-500);
  --kj-danger:  var(--kj-red-500);
  --kj-info:    var(--kj-teal-400);

  /* ปุ่มตามสเปก: Start = เขียว, Stop = แดง, Restart = น้ำเงินเข้ม */
  --kj-btn-start:  var(--kj-green-500);
  --kj-btn-start-hover: var(--kj-green-400);
  --kj-btn-stop:   var(--kj-red-500);
  --kj-btn-stop-hover: #ff6069;
  --kj-btn-restart: var(--kj-blue-500);

  --kj-focus-ring:  0 0 0 3px rgba(62, 123, 255, .35);
  --kj-danger-ring: 0 0 0 3px rgba(240, 68, 78, .32);

  /* พื้นหลังการ์ด/แถบเมนูตามภาพบรีฟ (การ์ด = gradient navy) */
  --kj-grad-card: linear-gradient(135deg, var(--kj-navy-800), var(--kj-navy-900));
  --kj-grad-side: linear-gradient(180deg, var(--kj-navy-850), var(--kj-navy-900));

  /* ---------- 3. Typography -------------------------------------------- */
  /* Prompt = ฟอนต์ในแพ็ก (ไทย+ละติน) / ตัวอื่นเป็น fallback ในเครื่อง */
  --kj-font-sans: 'Prompt', 'Noto Sans Thai', 'IBM Plex Sans Thai', Sarabun, 'Segoe UI', Tahoma, system-ui, sans-serif;
  --kj-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Mono', 'Courier New', ui-monospace, monospace;

  --kj-text-2xs: 11px;
  --kj-text-xs:  12px;
  --kj-text-sm:  13px;
  --kj-text-md:  14px;
  --kj-text-lg:  16px;
  --kj-text-xl:  20px;
  --kj-text-2xl: 24px;
  --kj-text-3xl: 32px;   /* display ตามสเปก */

  --kj-weight-regular: 400;
  --kj-weight-medium:  500;
  --kj-weight-semibold: 600;
  --kj-weight-bold:    700;

  --kj-leading-tight: 1.25;
  --kj-leading-base:  1.5;
  --kj-leading-loose: 1.75;

  --kj-tracking-caps: .06em;

  /* ---------- 4. Spacing (ฐาน 4px ตามสเปก) ----------------------------- */
  --kj-space-0: 0;
  --kj-space-1: 4px;
  --kj-space-2: 8px;
  --kj-space-3: 12px;
  --kj-space-4: 16px;
  --kj-space-5: 20px;
  --kj-space-6: 24px;
  --kj-space-7: 32px;
  --kj-space-8: 40px;
  --kj-space-9: 48px;
  --kj-space-10: 64px;

  /* ---------- 5. Radius / Border -------------------------------------- */
  --kj-radius-xs: 6px;
  --kj-radius-sm: 8px;
  --kj-radius-md: 10px;
  --kj-radius-lg: 12px;   /* การ์ด */
  --kj-radius-xl: 16px;   /* modal */
  --kj-radius-pill: 999px;

  --kj-border-w: 1px;
  --kj-border-w-strong: 2px;

  /* ---------- 6. Elevation ------------------------------------------- */
  --kj-shadow-1: 0 2px 8px rgba(2, 8, 18, .35);
  --kj-shadow-2: 0 8px 24px rgba(0, 0, 0, .18);
  --kj-shadow-3: 0 16px 40px rgba(0, 0, 0, .28);
  --kj-shadow-glow: 0 0 0 1px var(--kj-accent-line), 0 8px 24px rgba(62, 123, 255, .22);

  /* ---------- 7. Layout ---------------------------------------------- */
  --kj-shell-max: 1440px;
  --kj-header-h: 60px;
  --kj-console-h: 420px;
  --kj-sidebar-w: 240px;  /* สเปก: sidebar 240px */
  --kj-touch-min: 44px;   /* touch target ขั้นต่ำบนมือถือ */

  /* ---------- 8. Motion --------------------------------------------- */
  --kj-dur-instant: 120ms;
  --kj-dur-fast:    120ms;
  --kj-dur-base:    180ms;
  --kj-dur-slow:    280ms;
  --kj-ease-out:   cubic-bezier(.22, .61, .36, 1);
  --kj-ease-inout: cubic-bezier(.65, .05, .36, 1);

  /* ---------- 9. Icons ---------------------------------------------- */
  --kj-icon-16: 16px;
  --kj-icon-20: 20px;
  --kj-icon-24: 24px;
  --kj-icon-stroke: 2px;  /* สเปก: stroke 2px, ปลายเส้น round */

  /* ---------- 10. Z-index ------------------------------------------ */
  --kj-z-header: 20;
  --kj-z-dropdown: 40;
  --kj-z-toast: 60;
  --kj-z-modal: 80;
}

/* เคารพการตั้งค่า reduced-motion ของผู้ใช้ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --kj-dur-instant: 0ms;
    --kj-dur-fast: 0ms;
    --kj-dur-base: 0ms;
    --kj-dur-slow: 0ms;
  }
}