/* ============================================================================
   geoplots_tokens.css — ชุดตัวแปรมาตรฐานกลาง (Design Tokens) ของ GEOPLOTS
   ----------------------------------------------------------------------------
   อัปเดต: 2026-11-05 (UI Consistency Program — Phase 1)
   ใช้ร่วมทั้งโปรเจค: ปุ่ม / ตาราง / ระยะ / รัศมีมุม / ตัวอักษร
   หลักการ:
   · ไฟล์นี้เป็น "ต้นทางค่าเดียว" (single source of truth) — หน้าใดจะ override
     ให้ override ด้วยการเขียนค่าใหม่ที่ selector ของหน้านั้น ไม่ใช่แก้ไฟล์นี้
   · ระบบสีประจำระบบย่อยของแดชบอร์ด (--accent ต่อหน้า เช่น flood น้ำเงิน
     crop เขียว hotspot ส้ม) เป็นของ dashboard_theme.css — คงไว้ ไม่แตะ
   · ทุก var() ในธีมกลางต้องมี fallback ครบ เพื่อใช้ได้แม้หน้าไม่ได้ลิงก์ไฟล์นี้
   ============================================================================ */

:root {
  /* ---------- สีแบรนด์ (อ้างอิงหัวตารางมาตรฐาน table_theme.css) ---------- */
  --gp-primary: #2e7d32;            /* เขียวแบรนด์ — ใช้กับหัวตาราง/ลิงก์/accent */
  --gp-primary-hover: #1b5e20;
  --gp-primary-soft: #f0fdf4;       /* พื้นเขียวอ่อน (hover แถวตาราง, ป้ายสถานะ) */
  --gp-primary-border: #d1fae5;

  /* ---------- ปุ่ม action หลัก — emerald gradient (btn-search-primary) ---------- */
  --gp-action-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);
  --gp-action-gradient-hover: linear-gradient(135deg, #059669 0%, #064e3b 100%);

  /* ---------- สีความหมาย (ชุดเดียวทั้งโปรเจค) ---------- */
  --gp-danger: #d32f2f;
  --gp-danger-hover: #b71c1c;
  --gp-danger-soft: #fef2f2;
  --gp-warn: #d97706;
  --gp-warn-soft: #fffbeb;
  --gp-ok: #059669;
  --gp-ok-soft: #ecfdf5;
  --gp-info: #0284c7;
  --gp-info-soft: #f0f9ff;

  /* ---------- เทา slate + พื้นหลัง ---------- */
  --gp-bg-body: #f8fafc;
  --gp-bg-card: #ffffff;
  --gp-bg-muted: #f1f5f9;
  --gp-border: #e2e8f0;
  --gp-border-strong: #cbd5e1;
  --gp-text-main: #0f172a;
  --gp-text-secondary: #334155;
  --gp-text-muted: #64748b;

  /* ---------- รัศมีมุม — ใช้ 4 ค่าเท่านั้น ---------- */
  --gp-radius-sm: 6px;              /* ปุ่ม / input / ป้ายเล็ก */
  --gp-radius-md: 10px;             /* ปุ่มในตาราง / กล่องเล็ก / popup */
  --gp-radius-lg: 14px;             /* การ์ด / แผง */
  --gp-radius-pill: 999px;          /* ป้ายสถานะ / chip */

  /* ---------- ระยะ (spacing) — ใช้ 5 ค่าเท่านั้น ---------- */
  --gp-space-1: 4px;
  --gp-space-2: 8px;
  --gp-space-3: 12px;
  --gp-space-4: 16px;
  --gp-space-5: 24px;

  /* ---------- ตัวอักษร ---------- */
  --gp-font-heading: 'Prompt', sans-serif;
  --gp-font-body: 'Sarabun', 'Prompt', sans-serif;
  --gp-text-2xs: 10px;              /* ใช้น้อยที่สุด — badge จิ๋วเท่านั้น */
  --gp-text-xs: 11px;
  --gp-text-sm: 12px;
  --gp-text-md: 13px;
  --gp-text-base: 0.875rem;         /* 14px — ข้อความปุ่ม/ตารางมาตรฐาน */

  /* ---------- ปุ่มมาตรฐาน ---------- */
  --gp-btn-height: 38px;            /* ปุ่ม action หลัก */
  --gp-btn-height-sm: 26px;         /* ปุ่มเล็กใน legend/ช่องค้นหา */
  --gp-btn-height-table: 28px;      /* ปุ่มในแถวตาราง */

  /* ---------- เงา ---------- */
  --gp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --gp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* ---------- การเคลื่อนไหว — ค่าเดียวทั้งโปรเจค ---------- */
  --gp-transition: all 0.2s ease;
}