/* khaisap — ระบบออกแบบ
   แหล่งเดียวของสี ฟอนต์ ระยะ และจังหวะ แก้ที่นี่ที่เดียว

   ───────────────────────────────────────────────────────────
   จุดยืนทางการออกแบบ: "แผ่นเขียนแบบ"
   ภาษาภาพมาจากโต๊ะเขียนแบบของสถาปนิก ไม่ใช่เว็บอสังหาฯ ทั่วไป
     · เส้นสายมุมมอง — เส้นนำสายตาวิ่งเข้าหาจุดรวมสายตาเดียวทั้งหน้า
     · ลำดับน้ำหนักเส้น 3 ระดับ เหมือนปากกาเขียนแบบ 0.2 / 0.35 / 0.7
     · เส้นบอกระยะพร้อมขีดปลาย ตัวเลขกำกับกลางเส้น
     · เส้นแดงคือเส้นแนวเขตและเส้นมิติ ใช้เป็นสีเน้นเดียว
     · ตัวเลขอาราบิกใน monospace เหมือนค่าที่กำกับในแบบ
     · มุมฉากทุกมุม กระดาษเขียนแบบไม่มีมุมมน
   ─────────────────────────────────────────────────────────── */

:root {
  /* ---------- สี: กระดาษเขียนแบบ ---------- */
  --paper:      #F1EFE8;   /* กระดาษร่าง */
  --paper-2:    #FBFAF6;   /* แผ่นซ้อนด้านบน */
  --paper-sink: #E4E1D7;   /* พื้นยุบ */
  --ink:        #17181A;   /* ดินสอ 2B */
  --ink-2:      #4E5258;
  --ink-3:      #868B91;

  /* น้ำหนักเส้นเขียนแบบ 3 ระดับ */
  --line-1:     #DFDCD2;   /* 0.20 — เส้นผัง เส้นช่วย */
  --line-2:     #BEBAAE;   /* 0.35 — เส้นมิติ เส้นกรอบ */
  --line-3:     #4E5258;   /* 0.70 — เส้นตัด เส้นรูปด้าน */
  --rule:       var(--line-2);
  --rule-soft:  var(--line-1);

  --seal:       #B4341F;   /* เส้นแนวเขต / เส้นมิติ — สีเน้นเดียว */
  --seal-soft:  #F6E4DF;
  --survey:     #2C5F6B;   /* หมึกรังวัด ใช้ในตารางข้อมูล */
  --survey-soft:#E2EBED;

  color-scheme: light;

  /* ---------- ตัวอักษร ----------
     Anuphan    = ไทยจีออเมตริก เส้นสะอาด ตรงตัว แบบตัวอักษรกำกับในแบบก่อสร้าง
     Sarabun    = เนื้อความยาว อ่านสบายและเข้าบริบทเอกสารไทย
     Space Mono = ตัวเลขอาราบิก ค่ามิติ และรหัสแผ่น */
  --font-display: "Anuphan", system-ui, "Segoe UI", sans-serif;
  --font-body:    "Sarabun", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data:    "Space Mono", ui-monospace, Consolas, "Sarabun", monospace;

  --step--2: 11.5px;
  --step--1: clamp(13.5px, 0.82rem + 0.1vw, 14.5px);
  --step-0:  clamp(16px, 0.95rem + 0.15vw, 17px);
  --step-1:  clamp(19px, 1.02rem + 0.55vw, 22px);
  --step-2:  clamp(25px, 1.15rem + 1.5vw, 36px);
  --step-3:  clamp(33px, 1.30rem + 3.2vw, 58px);
  --step-4:  clamp(46px, 1.40rem + 7.6vw, 134px);  /* หัวเรื่องขนาดกราฟิก */

  --leading-tight: 0.96;   /* หัวเรื่องชิดแบบชื่อแผ่นแบบ */
  --leading-head:  1.22;
  --leading-body:  1.78;
  --tracking-label: 0.2em;
  --tracking-display: -0.025em;

  /* ---------- ระยะ: โมดูลเขียนแบบ 8 / 24 / 96 ---------- */
  --gutter: 24px;
  --measure: 62ch;
  --wrap: 1280px;
  --mod: 96px;            /* ช่องผังหลัก ใช้ร่วมกับพื้นหลังเส้นผัง */
  --s1: 6px;  --s2: 12px; --s3: 18px; --s4: 28px;
  --s5: 44px; --s6: 72px; --s7: 112px; --s8: 168px;

  --radius: 0px;          /* แบบก่อสร้างไม่มีมุมมน */
  --radius-seal: 999px;
  --shadow: 0 0 0 1px var(--line-1);

  /* ---------- จังหวะ ---------- */
  --lerp-tau: 8;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 160ms;
  --dur-base: 420ms;
  --dur-slow: 1000ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:      #121316;
    --paper-2:    #1A1C20;
    --paper-sink: #0C0D0F;
    --ink:        #E9E7E0;
    --ink-2:      #A7ABB2;
    --ink-3:      #767B82;
    --line-1:     #2A2D33;
    --line-2:     #3C4046;
    --line-3:     #A7ABB2;
    --seal:       #E2674D;
    --seal-soft:  #2C140F;
    --survey:     #6FB3C1;
    --survey-soft:#13262A;
    --shadow: 0 0 0 1px var(--line-1);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:      #121316;
  --paper-2:    #1A1C20;
  --paper-sink: #0C0D0F;
  --ink:        #E9E7E0;
  --ink-2:      #A7ABB2;
  --ink-3:      #767B82;
  --line-1:     #2A2D33;
  --line-2:     #3C4046;
  --line-3:     #A7ABB2;
  --seal:       #E2674D;
  --seal-soft:  #2C140F;
  --survey:     #6FB3C1;
  --survey-soft:#13262A;
  --shadow: 0 0 0 1px var(--line-1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
}