/* ==========================================================================
   WelB Design System — "คู่มือภาคสนาม" (Field Guide), ชุดกลางคืน
   spec: docs/design-tokens.md — อย่าแก้ค่าที่นี่โดยไม่แก้ spec ด้วย

   1 ต.ค. 2569: เจ้าของเลือกชุดกลางคืนเป็นหน้าตาหลักของเว็บ แบบที่ wel-b.net
   ตัวเดิมใช้ (พื้นดำอุ่น ตัวอักษรครีม ส้ม Bitcoin) ไม่สลับตามธีมของเครื่อง
   การ์ดและปุ่มมนได้ 8–12px ตามที่เว็บเดิมปรับไว้ ชุดกระดาษเหลือไว้ตอนพิมพ์
   ========================================================================== */

:root {
  /* --- สี ----------------------------------------------------------------- */
  --paper:        #12100C;   /* พื้นหน้า: หมึกอุ่น ไม่ใช่ดำสนิท */
  --paper-2:      #1B1811;   /* การ์ด แผง ช่องกรอก */
  --paper-3:      #241F16;   /* ยกขึ้นอีกชั้น: hover, หัวตาราง */
  --ink:          #EDE6D6;
  --ink-2:        #C7BEA9;
  --ink-3:        #948B78;   /* ตัวหนังสือรอง ≥ 5:1 บน --paper-2 */
  --rule:         #2E2A22;
  --rule-strong:  #4A4437;
  --orange:       #F7931A;   /* สีแบรนด์: ปุ่ม หมุด ตัวเลขเน้น */
  --orange-hi:    #FFA63D;   /* ปุ่มส้มตอนชี้ */
  --orange-ink:   #F0A93F;   /* ตัวอักษร/ลิงก์สีส้มบนพื้นมืด */
  --on-orange:    #14110D;   /* ตัวอักษรบนพื้นส้ม */
  --open:         #6FBF8F;
  --closed:       #E08A76;

  /* สีประจำหมวด: ชุดดินลดความอิ่มตัว แยกหมวดได้แต่กลมกลืนเป็นระบบเดียว */
  --g-food:     #DFA24A;
  --g-shop:     #C58A6E;
  --g-service:  #B0A06A;
  --g-health:   #7FA98A;
  --g-stay:     #7E9BB0;
  --g-beauty:   #B48CA0;
  --g-leisure:  #8FA0B8;
  --g-online:   #9A958C;
  --g-cannabis: #86A96F;
  --g-other:    #8C857A;

  /* --- ตัวอักษร --------------------------------------------------------- */
  --font-display: 'Trirong', Georgia, 'Times New Roman', serif;
  --font-body:    'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-data:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  --t-xs:      0.75rem;
  --t-sm:      0.875rem;
  --t-base:    1rem;
  --t-md:      1.125rem;
  --t-lg:      1.375rem;
  --t-xl:      1.75rem;
  --t-2xl:     2.25rem;
  --t-display: clamp(2.6rem, 6.4vw, 4.75rem);

  /* ไทยมีสระบน + วรรณยุกต์ซ้อนสองชั้น — ห้าม body ต่ำกว่า 1.75 */
  --lh-tight: 1.25;
  --lh-data:  1.45;
  --lh-body:  1.75;

  --measure: 68ch;

  /* --- ระยะ (ฐาน 4px) --------------------------------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-12: 3rem;
  --s-16: 4rem;

  --gutter:   2rem;
  --page-max: 72rem;

  /* --- เส้น กรอบ ความมน: ลำดับชั้นมาจากเส้นและพื้น ไม่ใช่เงา ------------ */
  --hair:        1px solid var(--rule);
  --hair-strong: 1px solid var(--rule-strong);
  --rule-double: 3px double var(--rule-strong);
  --radius:      12px;       /* การ์ด แผง แผนที่ */
  --radius-sm:   8px;        /* ปุ่ม ช่องกรอก กล่องเล็ก */
  --radius-pill: 999px;      /* ชิป ป้าย */
  --shadow:      none;

  /* --- การเคลื่อนไหว ---------------------------------------------------- */
  --dur:  140ms;
  --ease: cubic-bezier(.2, 0, .38, 1);

  /* --- โฟกัส ------------------------------------------------------------ */
  --focus:        2px solid var(--orange);
  --focus-offset: 2px;

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}

/* พิมพ์ลงกระดาษใช้ชุดกระดาษ ประหยัดหมึกและอ่านง่ายกว่า */
@media print {
  :root {
    --paper: #FFFFFF; --paper-2: #F2EEE5; --paper-3: #E8E2D5;
    --ink: #14110D; --ink-2: #3D372E; --ink-3: #6E6656;
    --rule: #CDC4B1; --rule-strong: #A79C85;
    --orange-ink: #B25E06; --open: #2E6B4A; --closed: #8E4034;
    color-scheme: light;
  }
}

/* ==========================================================================
   ฐานราก — เท่าที่จำเป็นเพื่อบังคับใช้ระบบ ไม่ใช่ CSS framework
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;            /* คู่มือไม่ตะโกน — ห้าม 700 */
  line-height: var(--lh-tight);
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }

a {
  color: var(--orange-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--ink); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
}

/* ตัวเลขทุกตัวในตารางต้องเรียงตรงหลัก */
.data, table, time, .num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-data);
}

/* ตาราง: เส้นแนวนอนอย่างเดียว ห้ามเส้นแนวตั้ง */
table { width: 100%; border-collapse: collapse; }
th {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  text-align: left;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--hair-strong);
}
td {
  padding: var(--s-3);
  border-bottom: var(--hair);
  vertical-align: baseline;
}

/* สถานะเปิด/ปิด — ต้องมีสัญลักษณ์ ไม่พึ่งสีอย่างเดียว */
.status-open::before  { content: "\25CF "; color: var(--open); }   /* ● */
.status-closed::before{ content: "\25CB "; color: var(--closed); } /* ○ */

.marginalia {
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: var(--lh-data);
}

.lede {
  font-size: var(--t-md);
  max-width: var(--measure);
  color: var(--ink-2);
}

hr {
  border: 0;
  border-top: var(--hair);
  margin: var(--s-12) 0;
}