/* ============================================================
   LANDS DESIGN TOKENS — Single Source of Truth
   โทนสีของทั้งระบบ: ขาว / ครีม / น้ำตาล / ดำ / ทอง
   ------------------------------------------------------------
   ไฟล์นี้เป็นที่เดียวที่ประกาศค่าสีและ token พื้นฐาน
   ทุกหน้า (index / analyze / fease) ต้องโหลดไฟล์นี้ก่อน CSS อื่น
   ห้าม copy token block ไปฝังในไฟล์อื่น — จะเกิด drift เหมือนที่เคยเกิด
   ------------------------------------------------------------
   ทุกค่าสีตัวอักษรผ่าน WCAG AA (>= 4.5:1) เทียบกับ --bg และ --panel
   ทั้ง 2 ธีม — ตรวจแล้ว 2026-07-29 ถ้าแก้ค่าใดต้องวัด contrast ใหม่
   ============================================================ */

:root{
  /* พื้นผิว */
  --bg:#0b0b0d; --panel:#161613; --panel2:#1d1c18; --line:#33301f;
  --bg2:#131210; --bg3:#141310;
  --grad-top:#0a0a0c; --grad-bot:#0b0b0d;
  --chip:#26241c; --switch-off:#3a3626;

  /* ตัวอักษร */
  --txt:#f2ede1; --muted:#a99f86; --hint:#b8ae95;
  --btncalc-txt:#191507;

  /* ทอง + สถานะ
     --good เป็นโทนมะกอก (olive) ซึ่งยังอยู่ในตระกูลเอิร์ธโทน ไม่ใช่เขียวสด
     ใช้กับสถานะ "ดี/เสี่ยงน้อย" ให้แยกจาก --warn (ส้มทอง) และ --bad (สนิม) */
  --accent:#d4af37; --accent2:#f2d377;
  --warn:#e0a83a; --bad:#c4674a; --good:#b3b86a;

  /* Verdict (ดี/กลาง/แย่) */
  --vgood-bg:rgba(212,175,55,.10); --vgood-bd:rgba(212,175,55,.45);
  --vwarn-bg:rgba(224,168,58,.09); --vwarn-bd:rgba(224,168,58,.4);
  --vbad-bg:rgba(196,103,74,.09); --vbad-bd:rgba(196,103,74,.4);

  /* Tonal ladder — ใช้เมื่อ UI ต้องแยกหมวดหมู่หลายอันให้อ่านต่างกัน
     โดยไม่ออกนอกโทน (ไล่จากสว่าง → เข้ม) อีโมจิเป็นตัวสื่อหมวดหลัก */
  --cat-1:#f2d377; --cat-2:#d4af37; --cat-3:#c9a45c;
  --cat-4:#b8956a; --cat-5:#a9855a; --cat-6:#9c7d22; --cat-7:#b8ae95;
  --cat-1-bg:rgba(242,211,119,.10); --cat-2-bg:rgba(212,175,55,.10);
  --cat-3-bg:rgba(201,164,92,.10);  --cat-4-bg:rgba(184,149,106,.10);
  --cat-5-bg:rgba(169,133,90,.10);  --cat-6-bg:rgba(156,125,34,.14);
  --cat-7-bg:rgba(184,174,149,.10);

  /* ระยะ/มุม/ฟอนต์/เวลา */
  --r-sm:10px;--r-md:12px;--r-lg:16px;--r-pill:20px;
  --sp-1:6px;--sp-2:9px;--sp-3:12px;--sp-4:18px;
  --fs-hint:11px;--fs-body:12px;--fs-label:13px;
  --t-fast:.18s;
}

:root[data-theme="light"]{
  --bg:#f8f6f0; --panel:#ffffff; --panel2:#f6f2e6; --line:#e3dcc4;
  --bg2:#fdfbf6; --bg3:#f7f2e4;
  --grad-top:#f8f6ee; --grad-bot:#f8f6f0;
  --chip:#efe8d3; --switch-off:#d8cfae;

  --txt:#221f16; --muted:#6f6650; --hint:#665e46;

  --accent:#8a6a12; --accent2:#7a5f10;
  --warn:#8a5e0c; --bad:#9a4a30; --good:#4f5c22;

  --vgood-bg:#f8f0d9; --vgood-bd:#d9c383;
  --vwarn-bg:#fdf1de; --vwarn-bd:#efc98d;
  --vbad-bg:#f6e5dd; --vbad-bd:#dcae98;

  /* ชุดเดียวกันสำหรับพื้นครีม — เข้มขึ้นเพื่อคง contrast */
  --cat-1:#8c6a18; --cat-2:#6f5a12; --cat-3:#7d6432;
  --cat-4:#7a5b3a; --cat-5:#6d4f30; --cat-6:#4a3a0e; --cat-7:#6f6650;
  --cat-1-bg:rgba(140,106,24,.10); --cat-2-bg:rgba(111,90,18,.10);
  --cat-3-bg:rgba(125,100,50,.10); --cat-4-bg:rgba(122,91,58,.10);
  --cat-5-bg:rgba(109,79,48,.10);  --cat-6-bg:rgba(74,58,14,.12);
  --cat-7-bg:rgba(111,102,80,.10);
}