/* ============================================================
   commeIQ · commeIQ — Design Tokens (Single Source of Truth)
   ธีม: ม่วงจากโลโก้ commeIQ + เอกลักษณ์เมืองแพร่ (หม้อห้อม/น้ำเงินย้อมห้อม + ไม้สัก/ทอง)
   ⚠️ ห้าม hardcode สีในไฟล์อื่น — ใช้ตัวแปรจากไฟล์นี้เท่านั้น (กันหลุดธีม)
   ============================================================ */
:root{
  /* ---------- Brand : ม่วง (จากโลโก้ commeIQ) ---------- */
  --violet-50:#F1ECFC;
  --violet-100:#E4DAFA;
  --violet-300:#B79EF0;
  --violet-500:#8257E6;
  --violet-600:#6A3FD1;   /* PRIMARY — ม่วงหลักของแบรนด์ */
  --violet-700:#5730B4;
  --violet-900:#2A1E63;
  --brand:var(--violet-600);
  --brand-d:var(--violet-700);
  --brand-l:var(--violet-500);
  --brand-soft:var(--violet-50);
  --brand-grad:linear-gradient(135deg,#8257E6 0%,#5730B4 100%);
  --brand-grad-deep:linear-gradient(135deg,#5730B4 0%,#2A1E63 100%);

  /* ---------- หม้อห้อม (น้ำเงินย้อมห้อม) : สีวัฒนธรรมเมืองแพร่ ---------- */
  --mohom:#2C4A72;        /* น้ำเงินหม้อห้อม (ย้อมห้อม) */
  --mohom-d:#1E3557;
  --mohom-l:#3E6294;
  --mohom-soft:#E9EEF6;

  /* ---------- ไม้สัก / ทองวัดช่อแฮ : สีอุ่น accent ---------- */
  --teak:#C1904A;         /* ไม้สัก */
  --teak-d:#A6752F;
  --gold:#E0A93B;         /* ทอง */
  --teak-soft:#F7EFDE;

  /* ---------- Semantic ---------- */
  --success:#127544;  --success-soft:#E4F5EC;   /* เขียวเข้มผ่าน WCAG AA (5.0:1 บนพื้นอ่อน) */
  --sale:#C93A5E;     --sale-soft:#FBE9F0;   /* ชมพูอมม่วง — ผ่าน AA ตัวอักษรขาว (4.9:1) */
  --warn:#D98A21;     --warn-soft:#FCEFDA;
  --star:#E0A93B;                            /* ดาวรีวิว = ทอง */

  /* ---------- Neutrals : เทาเย็นอมม่วงเล็กน้อย ---------- */
  --bg:#F6F4FB;
  --surface:#FFFFFF;
  --surface-2:#F3F0FA;
  --surface-3:#ECE7F6;
  --ink:#1C1830;          /* ดำอมน้ำเงิน-ม่วง */
  --t2:#5E5875;
  --t3:#6B6480;   /* เข้มขึ้นให้ผ่าน WCAG AA (5.6:1 บนพื้นขาว) */
  --line:#E7E2F1;
  --line-2:#F0ECF8;
  --white:#FFFFFF;

  /* ---------- Elevation / shape ---------- */
  --sh-1:0 1px 2px rgba(42,30,99,.06), 0 3px 10px rgba(42,30,99,.05);
  --sh-2:0 6px 18px rgba(42,30,99,.10), 0 2px 6px rgba(42,30,99,.06);
  --sh-3:0 14px 40px rgba(42,30,99,.16);
  --sh-brand:0 8px 22px rgba(106,63,209,.30);
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;

  /* ---------- Type ---------- */
  --font-d:"Kanit", system-ui, sans-serif;        /* หัวข้อ (geometric เข้ากับโลโก้) */
  --font-b:"Sarabun","Noto Sans Thai", system-ui, sans-serif;  /* เนื้อหา */
  --font-num:"IBM Plex Mono", ui-monospace, monospace;         /* ตัวเลข/ราคา */

  --fs-hero:clamp(28px,4.4vw,44px);
  --fs-h1:clamp(24px,3.4vw,34px);
  --fs-h2:22px; --fs-h3:18px; --fs-body:15.5px; --fs-sm:13.5px; --fs-xs:12px;

  /* ---------- Layout ---------- */
  --maxw:1200px;
  --gap:16px;
  --header-h:60px;
  --nav-h:64px;           /* bottom nav (mobile) */
}

/* Dark mode = อนาคต (P-later). Prototype เป็น light-first.
   เตรียม hook ไว้ ถ้าจะทำ dark ให้ override ตัวแปรชุดบนใน block นี้ */
/* @media (prefers-color-scheme:dark){ :root{ ... } } */