/* ============================================================
   pm-tokens.css — แหล่งความจริงเดียวของ design token (B-1)
   ห้ามมีค่า hex ในไฟล์อื่นของธีม
   ธีม 1a "Olive Apothecary" · ทุกค่ามาจาก Claude Design project

   ที่มา: docs/design.md §10.2 — คัดลอกตามตัวอักษร ห้ามแก้ค่าที่นี่
   โดยไม่แก้ §10.2 ก่อน
   ลำดับโหลด (C-7): pm-tokens → pm-base → pm-layout → pm-components → pm-utilities
   ============================================================ */
:root{
  /* ---- พื้น ---- */
  --color-paper:#F4F1E6;
  --color-surface:#FFFDF6;
  --color-shade:#E7E1CC;          /* ห้ามมีตัวอักษรบนนี้ */
  /* 🔴 ชั่วคราว — เพิ่ม 15 ก.ย. 2026 (รอบที่ 9) ตามคำสั่ง "ปรับให้เป็นสีขาวไปก่อนนะ"
     พื้นหลังของ **ช่องภาพสินค้าที่มีภาพจริงแล้ว** เท่านั้น (.pm-media--photo)
     ทำไมต้องมี: ภาพสินค้า 5 ใน 13 ใบมีพื้นหลังโปร่งใส → เห็น --color-shade (ครีม) ทะลุออกมา
     ขณะที่อีก 4 ใบเป็น JPG พื้นขาวสนิท → วางเรียงกันแล้วเห็นเป็นคนละโทนทันที
     ⛔ ห้ามเอาไปใช้เป็นพื้นของอย่างอื่น — ช่องรอภาพที่ยังไม่มีภาพยังต้องเป็น --color-shade เหมือนเดิม
     ✅ วันที่ได้ภาพชุดใหม่ที่คุมพื้นหลังเดียวกันแล้ว (P-2 · B-7) **ให้ลบ token นี้และกฎที่ใช้มันทิ้ง** */
  --color-photo-bg:#FFFFFF;
  --color-shade-deep:#4F4A10;
  --color-night:#2A2C1C;
  --color-accent-field:#E7E2F0;

  /* ---- ตัวอักษร ---- */
  --color-ink:#2A2C1C;            /* 12.59 บน paper */
  --color-ink-body:#454736;       /*  8.41 */
  --color-ink-muted:#54563F;      /*  6.68 */
  --color-on-night:#F4F1E6;       /* 12.59 บน night · 5.20 บน brand */
  --color-on-night-2:#C7BF9F;     /*  7.71 */
  --color-on-night-3:#C3B96B;     /*  7.10 */

  /* ---- แบรนด์ / accent ---- */
  --color-brand:#6E6614;          /* พื้นปุ่มหลัก — สีเดียวที่เป็นพื้นปุ่มหลักได้ */
  --color-brand-ink:#5A5410;      /* ตัวอักษร / hover / focus ring */
  --color-accent:#6E688C;         /* ห้ามเป็นพื้นปุ่มหลัก · ห้ามเป็นสีเนื้อความ */

  /* ---- เส้น ---- */
  --color-line:#DDD6C0;                    /* ประดับเท่านั้น 1.28 */
  --color-line-strong:#8F8A72;             /* ขอบ control 3.07 */
  --color-line-night:rgba(244,241,230,.42);/* 3.51 บน night */
  --color-night-card:rgba(244,241,230,.06);
  --color-night-chip:rgba(244,241,230,.14);

  /* ---- ฟอนต์ (2 family · มติ 10 ก.ย.) ---- */
  --font-display:'Instrument Serif',Georgia,'Times New Roman',serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;

  /* ---- ขนาด display ---- */
  --fs-d1:78px; --fs-d2:58px; --fs-d3:46px;
  --fs-d4:34px; --fs-d5:29px; --fs-d6:21px;

  /* ---- ขนาดข้อความ ---- */
  --fs-deck:18px;  --fs-body-long:17.5px; --fs-body:16.5px;
  --fs-h5:17px;    --fs-small:15px;  --fs-h6:14px;
  --fs-meta:13px;  --fs-label:12.5px;      /* เล็กที่สุดในระบบ — B-4 */

  /* ---- ระยะห่าง ---- */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  /* ---- เลย์เอาต์ / รูปทรง ---- */
  --wrap:1240px; --pad:40px; --radius:2px;

  /* ── มุมมนชุด Checkout — override design.md §รูปทรง (มติเจ้าของงาน 16 ก.ย. 2026) ──
     ค่าทั้งหมดอ่านจาก `Case A - Checkout.dc.html` ตรง ๆ ไม่ได้คิดขึ้นเอง
     ⛔ **ห้ามแก้ `--radius:2px` ข้างบนทิ้ง** — Home/Shop/Cart/Header/Footer ยังใช้อยู่
        ถ้าแก้ตัวนั้นทั้งเว็บจะเปลี่ยนพร้อมกันโดยไม่ได้ตรวจ
     🔴 ถ้าวันหนึ่งตัดสินให้ทั้งเว็บมน ให้ไล่เปลี่ยนทีละหน้าแล้วตรวจ ไม่ใช่สลับค่าตัวเดียว */
  --radius-sm:10px;      /* ช่องกรอก · รูปสินค้าในสรุปออเดอร์ */
  --radius-md:14px;      /* แถบคูปอง · การ์ด radio (วิธีส่ง / ช่องทางจ่ายเงิน) */
  --radius-lg:18px;      /* กล่องความมั่นใจท้ายคอลัมน์ขวา */
  --radius-xl:22px;      /* การ์ดหลักทุกใบ */
  --radius-pill:999px;   /* ปุ่ม Place order */

  /* ขั้นตัวอักษรที่ artboard checkout ใช้แต่ยังไม่มีในสเกล (d6 21 ← 24 → d5 29) */
  --fs-d5b:24px;         /* หัวการ์ดคอลัมน์ขวา */
  --gap-checkout:28px;   /* ระยะระหว่างสองคอลัมน์ตาม artboard */

  /* พื้นกล่องรายละเอียดช่องทางจ่ายเงิน — artboard ใช้สองค่านี้ ไม่มีใน token เดิม */
  --color-paybox:#FAF7EF;
  --color-paybox-line:#E2DCCB;

  /* ── ชุดตะกร้า — ปรับให้ตรง artboard (มติเจ้าของงาน 16 ก.ย. 2026 รอบ Cart) ──
     ค่าอ่านจาก `Case A - Cart.dc.html` ตรง ๆ · แผน docs/plan-cart-match-artboard-2026-09-16.md §2
     🔴 รอบก่อนไม่ใช้สองค่านี้เพราะ **ยังไม่เคยวัด contrast** — รอบนี้วัดแล้วและผ่าน
     ⛔ กับดักที่ต้องรู้: ค่า --color-on-night* ทุกตัววัดไว้บน #2A2C1C (ปลายเข้ม)
        พอเป็น gradient **ปลายอ่อน #3D3B12 เป็นตัวตัดสิน** ตัวเลขข้างล่างจึงวัดปลายอ่อน
        วัดบน #3D3B12 : --color-gold 6.49 ✅ · --color-on-night 10.13 ✅
                        --color-on-night-2 6.21 ✅ · --color-on-night-3 5.71 ✅
     ⛔ ห้ามเอา --color-gold ไปเป็นตัวอักษรบนพื้นสว่าง — วัดไว้เฉพาะบนพื้นเข้มสองค่านี้ */
  --color-night-2:#3D3B12;   /* ปลายอ่อนของ gradient การ์ดสรุปยอด */
  --color-gold:#D9C08F;      /* eyebrow "Summary" · ยอดส่วนลด · ชิปคูปอง */

  /* ขั้นตัวอักษรที่ artboard cart ใช้แต่ยังไม่มีในสเกล (d4 34 ← 38 → d3 46)
     เหตุผลเดียวกับ --fs-d5b ของรอบ checkout: ขั้นถัดไปในสเกลห่างเกินจนมองออก */
  --fs-d4b:38px;             /* ยอดรวมในการ์ดสรุปยอดของหน้าตะกร้า */
  --measure-body:720px; --aside:300px;
  --gap-shell:64px;     --measure-prose:62ch;
  --shadow-card:0 16px 40px rgba(42,44,28,.14);
  --shadow-lift:0 30px 70px rgba(42,44,28,.20);
}

@media(max-width:1180px){ :root{ --fs-d1:60px; --fs-d3:38px; --s7:72px; --s8:88px; } }
@media(max-width:680px){  :root{ --fs-d1:42px; --fs-d2:38px; --fs-d3:32px;
                                 --fs-d5:25px; --fs-deck:17px; --pad:22px;
                                 --s7:56px; --s8:64px; } }

/* ============================================================
   ภาคผนวก — token ที่ design.md ระบุค่าไว้แล้วแต่ §10.2 ยังไม่ได้
   ประกาศเป็นชื่อ  ทุกบรรทัดอ้างที่มาได้  ไม่มีค่าใดคิดขึ้นใหม่
   (ไม่ใช่สี — มติ "20 สี" ของ §3.1 จึงไม่ถูกแตะ)
   ============================================================ */
:root{
  /* motion — design.md §8.5 */
  --dur-micro:.18s;                        /* §8.5 micro-interaction 150–250ms */
  --dur-section:.55s;                      /* §8.5 การเข้าของ section */
  --ease-section:cubic-bezier(.22,.61,.36,1);/* §8.5 */

  /* รูปทรงเฉพาะ hero — design.md §8.3 · ห้ามลามไปที่การ์ด */
  --radius-hero:180px 180px 4px 4px;

  /* อัตราส่วนภาพ — design.md §8.4 (B-7) */
  --ratio-product:1/1;
  --ratio-hero:4/5;
  --ratio-article:16/10;
}

/* ============================================================
   ภาคผนวก 2 — รอบตะกร้า + mini-cart (16 ก.ย. 2026)

   🔴 สองค่านี้ **ไม่ใช่สีใหม่** — เป็นค่าความโปร่งของ --color-night (#2A2C1C)
      ซึ่งอนุมัติแล้วใน §3.1 · เขียนไว้ที่นี่เพราะไฟล์นิยาม token คือที่เดียวที่
      ให้มีค่าสีดิบได้ (B-1) · ⛔ ห้ามพิมพ์ rgba(42,44,28,…) ลงไฟล์ component
   ⛔ ไฟล์ออกแบบ `Case A - Cart.dc.html` ใช้ gradient #3D3B12→#2A2C1C และทอง #D9C08F
      **ไม่ได้เพิ่มทั้งสามค่านั้นที่นี่** — ยังไม่ผ่าน Claude Design และ #D9C08F
      ยังไม่เคยวัด contrast · การ์ดสรุปยอดจึงแมปไป --color-night / --color-on-night-3
      ที่วัดแล้ว (ดูหัวไฟล์ woocommerce/cart/cart-totals.php · คำถามอยู่ในรายงาน §4)
   ============================================================ */
:root{
  /* 🔴 แก้ค่า 16 ก.ย. 2026 (รอบลิ้นชักตรง artboard) — เดิม .42 เป็นค่าที่ตั้งเอง
     `CaseANav.dc.html` เขียน `rgba(42,44,28,.34)` ตรง ๆ → ใช้ค่าของไฟล์ออกแบบ
     ⛔ token นี้ถูกใช้ที่เดียวคือฉากหลังลิ้นชัก (grep แล้ว) จึงไม่กระทบหน้าอื่น */
  --color-scrim:rgba(42,44,28,.34);  /* ฉากหลังลิ้นชัก = --color-night ที่ 34% */
  --z-drawer:200;                    /* สูงกว่า .pm-header (sticky) ที่ใช้ z-index 60 */

  /* ── เงา + จังหวะของลิ้นชัก — อ่านจาก `CaseANav.dc.html` ตรง ๆ (16 ก.ย. 2026) ──
     ⛔ **ห้ามใช้ --shadow-lift กับลิ้นชัก** — ตัวนั้นทอดเงาลง (0 30px) เหมาะกับการ์ดที่ลอยขึ้น
        ลิ้นชักเลื่อนมาจากขอบขวา เงาต้องทอดไปทางซ้าย ไม่งั้นขอบซ้ายของลิ้นชักแบนติดหน้าเว็บ
        --shadow-lift ยังถูกใช้อีก 2 ที่ (pm-components 405 · pm-layout 409) จึงห้ามไปแก้ค่ามัน
     🔴 --dur-drawer ต้อง **น้อยกว่า 400ms** เสมอ — pm-minicart.js ใส่ `hidden` กลับที่ 400ms
        ถ้าช้ากว่านั้นลิ้นชักจะหายวับกลางทางที่ยังเลื่อนไม่สุด (ของเดิมใช้ --dur-section .55s
        = หายวับจริงมาตลอด · เจอตอนรอบนี้) */
  --shadow-drawer:-24px 0 60px rgba(42,44,28,.16);
  --dur-drawer:.38s;
  --ease-drawer:cubic-bezier(.22,.68,.24,1);
}