/* ============================================================
   DEKTHAI design tokens — สเกลกลาง (ขนาดตัวอักษร · มุมโค้ง · ระยะ · เงา)
   ⚠️ ไฟล์นี้ประกาศ "ชื่อตัวแปรใหม่" เท่านั้น — ห้ามประกาศสี (--accent/--ink/--bg/--border) ซ้ำที่นี่
      เพราะบางหน้าโหลดไฟล์นี้หลัง CSS ของหน้า และบางหน้าตั้งสีเองตั้งใจ (เช่น Shopee ส้ม #EE4D2D)
   ค่ามาจากการนับการใช้งานจริงใน CSS ทั้งระบบ (2026-10-29) — แผน: tasks/uiux-tokens-plan.md
   ============================================================ */
:root {
  /* ขนาดตัวอักษร (px) — เดิมใช้ 67 ขนาด ให้ค่อย ๆ ย้ายมาใช้ 9 ขั้นนี้ */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;

  /* มุมโค้ง — เดิม 34 ขนาด */
  --r-xs: 6px;
  --r-sm: 8px;      /* ปุ่ม */
  --r-md: 12px;     /* การ์ดเล็ก */
  --r-lg: 18px;     /* การ์ดหลัก (Theme v3) */
  --r-xl: 24px;     /* กล่องใหญ่ */
  --r-pill: 100px;  /* pill / ปุ่มแคปซูล */

  /* ระยะห่าง สเกล 4px */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* เงานุ่ม */
  --sh-1: 0 1px 2px rgba(10, 10, 11, .06), 0 1px 3px rgba(10, 10, 11, .05);
  --sh-2: 0 6px 18px rgba(10, 10, 11, .08);
  --sh-3: 0 14px 36px rgba(10, 10, 11, .12);

  /* ขนาดแตะขั้นต่ำบนมือถือ */
  --tap-min: 44px;
}