/* theme.css — ธีมรวมของทั้งเว็บ baby-live.com */

/* ============================================================
   เจตนาของไฟล์นี้
   ============================================================
   - ดึงโทนจากแลนดิ้งแนว B (Snow เลือก 10 ก.ย. 2569) มาใช้กับทุกหน้าที่เหลือของเว็บ
   - **โหลดต่อจาก `style.css` เสมอ** ไฟล์นี้ทำงานด้วยการทับค่าตัวแปรที่ `style.css` ประกาศไว้ 
     สลับลำดับแล้วไม่มีผลอะไรเลย
   - ★ **ไม่แตะโครงสร้างหน้าและไม่แตะข้อความ** เปลี่ยนแค่สีกับฟอนต์
     หน้าไหนพังหลังใส่ไฟล์นี้ = ปัญหาอยู่ที่ไฟล์นี้ ถอดออกไฟล์เดียวจบ
   - โชคดีที่ `style.css` เดิมใช้ `var()` แทบทุกที่ สีที่เขียนตายมีแค่ตรงที่ประกาศตัวแปร
     ทับที่ `:root` ที่เดียวจึงเปลี่ยนได้ทั้งเว็บ
   - สีพื้น `#050831` กับสีเน้น `#6E4DC1` **ตรงกับของเดิมอยู่แล้ว** 
     ไฟล์นี้จึงขยับแค่โทนรองกับฟอนต์
   ============================================================ */

/* ============================================================
   1. ทับตัวแปรที่ :root
   ============================================================ */
:root {
  --surface: #0B1043;           /* เดิม #0B1342 ขยับให้ตรงกับสีแผงของแนว B */
  --text: #EDEBF7;              /* เดิม #E8EAF6 อมม่วงขึ้นเล็กน้อยให้เข้ากับพื้น */
  --muted: #A3A6C7;             /* เดิม #A9B0D6 */
  --line: rgba(255, 255, 255, .14); /* เดิมเป็นสีทึบ #26306B เปลี่ยนเป็นเส้นโปร่งแบบแนว B — **บรรทัดนี้เปลี่ยนหน้าตามากที่สุดในไฟล์** เพราะทุกเส้นคั่นและทุกขอบการ์ดใช้ตัวนี้ */
  --accent-text: #B9A6F2;       /* ของใหม่ ไม่มีในของเดิม ใช้กับลิงก์และตัวเลขที่ต้องเด่น */
  /* --bg กับ --purple ไม่ต้องทับ เพราะตรงกับแนว B อยู่แล้ว (#050831 / #6E4DC1) */
}

/* ============================================================
   2. ฟอนต์เนื้อความ
   ============================================================ */
body {
  font-family: "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* ของเดิมเอา system-ui ขึ้นก่อนแล้วค่อยตกมา Noto Sans Thai
     สลับให้ฟอนต์ที่เราโฮสต์เองมาก่อน ทุกเครื่องจะได้เห็นหน้าตาเดียวกัน
     ไม่ใช่แล้วแต่ว่าเครื่องนั้นมีฟอนต์อะไร */
}

/* ============================================================
   3. ฟอนต์พาดหัวและปุ่ม
   ============================================================ */
h1, h2, h3,
.logo-text,
.btn,
.badge,
.page-head h1,
.card > h2,
.card > h3 {
  font-family: "Chakra Petch", "Noto Sans Thai", system-ui, sans-serif;
  /* Chakra Petch เป็นฟอนต์พาดหัวของแนว B มีน้ำหนักเดียว (700) 
     จึงใช้กับหัวข้อและปุ่มเท่านั้น ไม่เอามาใช้กับเนื้อความ */
}

/* ============================================================
   4. ★ ข้อยกเว้นที่ห้ามแตะ
   ============================================================ */

/* ★ ปุ่ม "เข้าสู่ระบบด้วย Google" ห้ามเปลี่ยนฟอนต์
   ปุ่มนั้นต้องหน้าตาตามที่ Google กำหนด (Roboto พื้นขาว) เป็นเงื่อนไขการใช้แบรนด์เขา
   ถ้าเผลอเปลี่ยน ปุ่มจะผิดข้อกำหนดโดยไม่มีอะไรฟ้อง */
.btn-google,
.google-btn,
[class*="google"] {
  font-family: Roboto, "Helvetica Neue", system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", sans-serif;
}

/* ตัวอักษรความกว้างคงที่ยังต้องเป็นความกว้างคงที่
   รหัสเครื่อง ค่า SHA-256 และคีย์ ต้องอ่านทีละตัวอักษรได้ */
code, pre, .device-id, .mono {
  font-family: "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ============================================================
   5. ลิงก์ในเนื้อหน้าใช้สีเน้นตัวใหม่
   ============================================================ */
.card a:not(.btn),
main a:not(.btn):not(.logo) {
  color: var(--accent-text);
  /* ใช้ :not(.btn) เพราะปุ่มมีสีของตัวเองอยู่แล้ว 
     ทับแล้วตัวหนังสือบนปุ่มจะจม */
}

/* ============================================================
   ปิดท้าย
   ============================================================
   ไม่มีอะไรในไฟล์นี้เปลี่ยนขนาด ระยะห่าง หรือตำแหน่งของอะไรทั้งสิ้น
   ถ้าหน้าไหนเลย์เอาต์เพี้ยนหลังใส่ไฟล์นี้ แปลว่าหน้านั้นพึ่งสีเส้นทึบเดิมอยู่
   ให้แก้ที่หน้านั้น อย่าถอยทั้งธีม
   ============================================================ */