/* ============================================================
   Vee Vee — Design tokens
   Direction: "Herbal Aesthetic" (chosen 8 Aug 2026)
   Every colour pair used for text has been checked to at least
   4.5:1 against its background. See docs/WEBSITE_BLUEPRINT.md 5.2
   ============================================================ */

:root {
  /* ---- พาเลตต์แบรนด์ ----
     อัปเดต 26 ส.ค. 2569 ตามชุดสีที่เจ้าของแบรนด์ส่งมา
     สิบสองสีด้านล่างคือค่าจากภาพพาเลตต์ตรง ๆ ไม่มีการปรับ
     ชื่อโทเคนยังเป็นชื่อเดิมทุกตัว จึงไม่ต้องไล่แก้ CSS อีกสี่ไฟล์
     สังเกตว่า #3c4638 เป็นสีเดียวกับเขียวแบรนด์เดิมเป๊ะ
     ชุดใหม่จึงเป็นการต่อยอด ไม่ใช่การรื้อทิ้ง */

  /* สีหลัก แถวบน */
  --ink:           #292420;  /* ตัวอักษรเนื้อความ  15.2:1 บนครีม */
  --olive-deep:    #34381c;  /* พื้นส่วนเข้ม       12.0:1 กับครีม */
  --verdant:       #3c4638;  /* เขียวแบรนด์         9.8:1 บนครีม */
  --olive:         #5b7633;  /* เขียวกลาง           5.1:1 บนครีม */
  /* สีหลัก แถวล่าง */
  --warm-grey:     #e9e3dc;  /* พื้นผิวโทนอุ่น */
  --cream:         #fffef7;  /* พื้นหลังหน้าเว็บ */
  --sage-pale:     #dde5d2;  /* พื้นผิวโทนเย็น */
  --lime:          #b4d234;  /* เน้นบนพื้นเข้มเท่านั้น 5.7:1 บนเขียวแบรนด์
                                บนพื้นสว่างได้ 1.07:1 ห้ามใช้เป็นตัวอักษรที่นั่น */
  /* สีรอง */
  --taupe:         #897156;  /* น้ำตาลเทา ใช้ตกแต่ง */
  --orange:        #c87613;  /* ส้ม เส้นและพื้น */
  --gold:          #f5b400;  /* ทอง ปุ่มและพื้น  1.8:1 บนครีม ห้ามเป็นตัวอักษร */
  --khaki:         #d1d09b;  /* คาคิ พื้นผิวรอง */

  /* ---- ชื่อเดิมที่ผูกเข้ากับพาเลตต์ใหม่ ---- */
  --sage:          var(--khaki);
  --citrus:        var(--gold);
  --ivory:         var(--cream);
  --blush:         var(--warm-grey);
  --mist:          var(--sage-pale);

  /* ---- เฉดที่ได้จากการคำนวณ ----
     พาเลตต์ให้สีหลักมา แต่ระบบต้องการเฉดกลางบางตัวที่ภาพไม่ได้ให้
     ทุกค่าคำนวณจากสีในพาเลตต์ ไม่ได้หยิบมาจากที่อื่น */
  --verdant-deep:  var(--olive-deep);
  --sage-light:    var(--sage-pale);
  --sage-wash:     #eef3e9;   /* เซจซีดลงไปทางครีม ใช้เป็นพื้นส่วนสลับ */
  /* สามตัวนี้คือสีในพาเลตต์ที่ถูกทำให้เข้มพอจะเป็นตัวอักษรได้

     สีต้นทางสวยแต่สว่างเกินไปสำหรับตัวอักษร วัดบนพื้นครีมได้
     ส้ม 3.43:1 · ทอง 1.82:1 · น้ำตาลเทา 4.56:1 (ผ่านเฉพาะบนครีม ตกบนพื้นอื่น)
     ค่าที่เลือกด้านล่างคือจุดที่เข้มพอผ่าน 4.5:1 ครบทั้งสี่พื้นผิวสว่าง
     ที่เว็บนี้ใช้จริง คือครีม เทาอุ่น เซจซีด และคาคิ */
  --citrus-deep:   var(--orange);   /* เส้น ขอบ พื้น เท่านั้น — 3.43:1 บนครีม */
  --citrus-text:   #7e4a0c;         /* ส้มเข้ม     ครีม 7.23 · คาคิ 4.60 */
  --verdant-soft:  #485d28;         /* เขียวเข้ม   ครีม 7.23 · คาคิ 4.60 */
  --ink-muted:     #64523f;         /* น้ำตาลเข้ม  ครีม 7.36 · คาคิ 4.68 */
  --ink-faint:     var(--taupe);    /* ตกแต่งเท่านั้น ห้ามใช้กับเนื้อความ */
  --white:         #FFFFFF;

  /* ---- Semantic ---- */
  --bg:            var(--ivory);
  --bg-alt:        var(--sage-wash);
  --bg-dark:       var(--verdant-deep);
  --text:          var(--ink);
  --text-muted:    var(--ink-muted);
  --border:        var(--mist);
  --focus:         var(--citrus-deep);

  /* ---- Typography ----
     Thai needs a taller line-height than Latin: vowel marks and tone
     marks stack above the baseline and collide below ~1.7 */
  /* เปลี่ยนเป็นฟอนต์ Prompt ทั้งเว็บ 26 ส.ค. 2569

     เดิมใช้สามตระกูล คือ Noto Serif Thai สำหรับหัวข้อ IBM Plex Sans Thai
     สำหรับเนื้อความ และ Fraunces สำหรับตัวเน้น
     ตอนนี้เป็น Prompt ตัวเดียวทั้งหมด ต่างกันที่น้ำหนักและตัวเอียงแทน

     ผลพลอยได้ที่สำคัญ — Fraunces ไม่มีตัวอักษรไทย ป้ายอย่าง "บทที่ 1 · Founder"
     จึงเคยแสดงสองฟอนต์ในบรรทัดเดียว คือคำว่า Founder เป็น Fraunces
     ส่วน "บทที่ 1" ตกไปใช้ฟอนต์ระบบที่ไม่ใช่ของแบรนด์เลย
     Prompt มีทั้งไทยและละตินอยู่ในตัวเดียว ปัญหานั้นจึงหมดไปเอง

     ยังคงไล่ระดับสามชั้นไว้ เผื่อวันหนึ่งอยากแยกฟอนต์อีกครั้ง
     จะได้แก้ที่นี่ที่เดียวโดยไม่ต้องไล่หาทุกไฟล์ */
  --font-display: "Prompt", system-ui, -apple-system, sans-serif;
  --font-body:    "Prompt", system-ui, -apple-system, sans-serif;
  --font-accent:  "Prompt", system-ui, -apple-system, sans-serif;

  --fs-hero:  clamp(2.5rem,  7vw,   5rem);
  --fs-h1:    clamp(2.25rem, 6vw,   4.5rem);
  --fs-h2:    clamp(1.75rem, 4vw,   3rem);
  --fs-h3:    clamp(1.375rem, 2.6vw, 1.875rem);
  --fs-h4:    clamp(1.125rem, 2vw,  1.375rem);
  --fs-lead:  clamp(1.125rem, 2vw,  1.375rem);
  --fs-body:  clamp(1rem, 1.6vw, 1.0625rem);
  --fs-small: 0.9375rem;
  --fs-tiny:  0.8125rem;

  --lh-tight: 1.15;
  --lh-head:  1.3;
  --lh-body:  1.8;   /* do not go below 1.7 for Thai body copy */

  --tracking-wide: 0.08em;

  /* ความยาวบรรทัดสูงสุดของเนื้อความ
     ตาคนอ่านสบายที่ราว 60–75 ตัวอักษรต่อบรรทัด เกินกว่านั้นตาจะหาต้นบรรทัด
     ถัดไปไม่เจอ 42rem ให้ราว 65 ตัวอักษรไทยที่ขนาดตัวอักษรเนื้อความของเรา
     ใช้ค่านี้ทุกที่ที่เป็นเนื้อความ เพื่อให้ทุกหน้ามีความกว้างบรรทัดเท่ากัน */
  --measure: 42rem;

  /* ---- Spacing ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* ระยะบน-ล่างของแต่ละส่วน
     ค่าเดิม 10rem ทำให้ระหว่างสองส่วนมีที่ว่างต่อเนื่อง 320px คือเกือบครึ่งจอ
     ที่ไม่มีอะไรเลย วัดแล้วพบว่า 27% ของความสูงหน้าแรกเป็นช่องว่างนี้
     ค่าใหม่ยังโปร่งอยู่ แต่ไม่บังคับให้คนเลื่อนผ่านความว่าง */
  --section-y: clamp(3rem, 5.5vw, 6rem);
  /* ใช้เมื่อสองส่วนที่ติดกันมีพื้นหลังสีเดียวกัน — ตรงนั้นตามองไม่เห็นรอยต่อ
     อยู่แล้ว การเว้นเต็มระยะจึงเป็นแค่ที่ว่างเปล่า ไม่ได้ช่วยแบ่งสายตา */
  --section-y-tight: clamp(2rem, 3.5vw, 3.5rem);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Shape ---- */
  --radius-sm: 8px;
  --radius:    16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Elevation (soft, never harsh) ---- */
  --shadow-sm: 0 1px 2px rgba(28, 35, 33, 0.05);
  --shadow:    0 8px 28px rgba(28, 35, 33, 0.08);
  --shadow-lg: 0 20px 60px rgba(28, 35, 33, 0.12);

  /* ---- Motion ----
     Deliberately slower than typical: the brand idea is "quiet",
     and fast snappy motion reads as loud. */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* ของที่กำลังหายไปต้องเร่งออก ไม่ใช่ค่อย ๆ จาง
     เพราะการปิดคือคำสั่งของผู้ใช้ และคำสั่งของผู้ใช้ต้องมาก่อนจังหวะของเรา */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* เร็วกว่า --dur-fast เพราะเป็นการตอบสนองที่นิ้วกำลังสัมผัสอยู่
     เกิน 150ms สมองจะอ่านว่า "เว็บหน่วง" ไม่ใช่ "ปุ่มตอบสนอง" */
  --dur-instant: 120ms;
  --dur-fast:  200ms;
  --dur:       450ms;
  --dur-slow:  700ms;
  --dur-exit:  160ms;

  --header-h: 72px;
}

@media (max-width: 640px) {
  :root { --header-h: 60px; }
}