/* ============================================================
   CI COLOR SYSTEM — แหล่งความจริงหนึ่งเดียวของสีทั้งเว็บ
   ใช้ร่วมกันทั้งหน้าบ้าน (index, portfolio, *-detail) และหลังบ้าน (admin, login)

   โทน CI ที่กำหนดไว้
     Primary    #2B2B2B  ชาร์โคล        - สีหลัก พื้นเข้ม/ปุ่มทึบ/ตัวอักษรหัวข้อ
     Secondary  #6E5A4B  น้ำตาลหนัง โทป - สีรอง ป้าย/เส้น/ข้อความรอง
     Accent     #C9A063  คาเมล ทองอุ่น  - สีเน้น ปุ่ม CTA/ไฮไลต์/ไอคอน
     Background #FAF8F5  ขาวนวลอุ่น     - พื้นหลังหลัก
     Text       #2A2A2A                 - สีตัวอักษร

   วิธีแก้โทนสีในอนาคต: แก้ที่ไฟล์นี้ไฟล์เดียว
   โทเคนเชิงความหมาย (--primary, --accent, --gray-*) ในแต่ละหน้า
   ประกาศเป็น var() ที่ชี้มาที่สเกลด้านล่าง ไม่มีเลขสีฝังในหน้าอีก

   หมายเหตุเรื่องคอนทราสต์: #C9A063 บนพื้นสว่างได้แค่ 2.2:1 ใช้เป็นตัวอักษรไม่ได้
   จึงต้องแยกเป็นสองตัว - camel-500 สำหรับพื้น/เส้น/ของตกแต่ง
   และ camel-700 (#8A6B33 = 4.68:1 บนพื้น #FAF8F5) สำหรับตัวอักษรกับไอคอน
   กลไกเดียวกับที่ระบบเดิมแยก --primary (สีสด) ออกจาก --accent (สีเข้มอ่านออก)
   ============================================================ */
:root {
    /* ---- CI core ---- */
    --ci-primary: #2B2B2B;
    --ci-secondary: #6E5A4B;
    --ci-accent: #C9A063;
    --ci-bg: #FAF8F5;
    --ci-text: #2A2A2A;

    /* ---- สเกลคาเมล / ทองอุ่น (สีเน้น) ---- */
    --camel-50: #FBF6EE;
    --camel-100: #F5EADA;
    --camel-200: #EBD9BE;
    --camel-300: #DFC49C;
    --camel-400: #D4B183;
    --camel-500: #C9A063;  /* = CI accent */
    --camel-600: #B08A4E;  /* hover ของพื้นคาเมล */
    --camel-700: #8A6B33;  /* ตัวอักษร/ไอคอนบนพื้นสว่าง 4.68:1 */
    --camel-800: #6E5527;  /* 6.62:1 */
    --camel-900: #4D3B1A;

    /* ---- สเกลโทป / น้ำตาลหนัง (สีรอง) ---- */
    --taupe-50: #F7F4F0;
    --taupe-100: #F2EDE7;
    --taupe-200: #E2D7CB;
    --taupe-300: #C3B3A2;
    --taupe-400: #9C8878;
    --taupe-500: #6E5A4B;  /* = CI secondary, 6.14:1 บนพื้น */
    --taupe-600: #5A483B;  /* 8.17:1 */
    --taupe-700: #46382E;

    /* ---- สเกลกลางอุ่น (เทาอมน้ำตาล) ----
       ไล่จากพื้นหลัง CI ขึ้นไปจนถึงสีตัวอักษร CI ทุกขั้นมีอุณหภูมิสีเดียวกัน
       ไม่ใช่เทากลางแบบ #808080 ที่จะดูเย็นตัดกับพื้นนวล */
    --neutral-50: #FAF8F5;  /* = CI background */
    --neutral-100: #F2EEE8;
    --neutral-200: #E5DFD6;
    --neutral-300: #CFC7BB;
    --neutral-400: #A89F94;
    --neutral-500: #736C64;  /* 4.88:1 บนพื้น - ตัวอักษรรองที่ยังผ่าน AA */
    --neutral-600: #5C5651;
    --neutral-700: #46423E;  /* 9.39:1 */
    --neutral-800: #333130;
    --neutral-900: #2A2A2A;  /* = CI text */

    /* ---- ชาร์โคล (พื้นเข้ม) ---- */
    --ink: #2B2B2B;          /* = CI primary */
    --ink-soft: #3C3A38;     /* เส้นขอบบนพื้นเข้ม */
    --ink-mid: #343231;
    --ink-deep: #1C1B1A;     /* พื้นเข้มสุด เช่น พื้นหน้า login / โหมดมืด */
    --ink-black: #161514;

    /* ---- ครีมอุ่น (จังหวะพื้น section) ---- */
    --cream-50: #FDFBF7;
    --cream-100: #FCF9F4;
    --cream-200: #F7F1E6;
    --cream-300: #F0E7D5;
    --cream-400: #EEE0C6;

    /* พื้นอ่อนสำหรับแถบ/บล็อกที่ต้องต่างจากพื้นหลักเล็กน้อย (--section-tint) */
    --tint-warm: #F6F2EC;

    /* ---- ค่า rgb ดิบ สำหรับใส่ alpha เอง ----
       ใช้แบบ rgba(var(--rgb-ink), 0.4) ได้ */
    --rgb-ink: 43, 43, 43;
    --rgb-accent: 201, 160, 99;
    --rgb-secondary: 110, 90, 75;
    --rgb-overlay: 28, 27, 26;

    /* ---- ตัวอักษรบนพื้นเข้ม / บนภาพที่ทับม่าน ----
       --on-dark-soft เป็นขาวนวลที่จางกว่าขาวสนิทประมาณ 9%
       ใช้กับข้อความรองเพื่อให้ลำดับสายตาต่างจากหัวข้อที่เป็นขาวสนิท
       ยังได้ 15.15:1 บนม่าน --ink-deep จึงไม่กระทบการอ่าน */
    --on-dark: #FFFFFF;
    --on-dark-soft: #F4F0EA;

    /* ---- สีสถานะ ----
       ไม่ใช่สี CI แต่เป็นสีบอกสถานะที่ผู้ใช้อ่านความหมายได้ทันที
       ปรับอุณหภูมิให้อุ่นขึ้นเล็กน้อยให้เข้ากับพื้นนวล แต่คงเนื้อสีเดิมไว้ */
    --status-success: #0F9D63;
    --status-success-bg: #E3F4EB;
    --status-success-ink: #0A5C3B;
    --status-warning: #D08B1F;
    --status-warning-bg: #FBF0DC;
    --status-warning-ink: #7A5210;
    --status-danger: #D9453F;
    --status-danger-bg: #FBEBEA;
    --status-danger-ink: #8E2622;
}