/* =====================================================================
   theme.css — ไฟล์ตกแต่งหน้าเว็บ (แก้ไฟล์นี้ไฟล์เดียวก็เปลี่ยนหน้าตาทั้งเว็บได้)

   วิธีแก้: เปลี่ยนค่าหลังเครื่องหมาย : แล้วบันทึก จากนั้นรีเฟรชหน้าเว็บ
   สีเขียนแบบ #RRGGBB  (หาสีได้ที่ https://htmlcolorcodes.com)

   หมายเหตุ: ค่าที่ตั้งจากหน้า "หน้าตาเว็บ" ในระบบ (เมนูผู้สอน) จะทับค่าในไฟล์นี้
   ถ้าอยากใช้ค่าจากไฟล์นี้ล้วน ๆ ให้กด "คืนค่าเริ่มต้น" ในหน้านั้น
   ===================================================================== */

:root {
  /* ---------- สีหลัก ---------- */
  --accent:       #111111;  /* สีปุ่มหลัก ตัวเลือกที่กด และข้อที่ตอบแล้ว */
  --accent-text:  #ffffff;  /* สีตัวอักษรบนปุ่มหลัก */
  --focus:        #2f5bea;  /* เส้นขอบตอนกดช่องกรอก / ข้อที่กำลังดู */

  /* ---------- พื้นหลังและตัวอักษร ---------- */
  --bg:           #ffffff;  /* พื้นหลังหน้าเว็บ */
  --surface:      #fafafa;  /* พื้นรอง เช่น หัวตาราง กล่องข้อความ */
  --text:         #111111;  /* ตัวอักษรหลัก */
  --muted:        #6b6b6b;  /* ตัวอักษรรอง (คำอธิบาย สีเทา) */
  --line:         #e6e6e6;  /* เส้นขอบบาง */
  --line-strong:  #cfcfcf;  /* เส้นขอบช่องกรอก / ปุ่มรอง */

  /* ---------- สีสถานะ ---------- */
  --ok:           #1d7a46;  --ok-bg:   #edf7f1;  /* ผ่าน / ถูก / สำเร็จ */
  --warn:         #9a6200;  --warn-bg: #fdf6e7;  /* เตือน / ปักธง */
  --bad:          #b42318;  --bad-bg:  #fdf0ef;  /* ผิด / ไม่ผ่าน / ลบ */

  /* ---------- ฟอนต์และขนาด ---------- */
  --font: "Inter", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;   /* ฟอนต์ตัวเลข/รหัส */
  --font-size:    15px;     /* ขนาดตัวอักษรพื้นฐาน (14px–17px กำลังดี) */

  /* ---------- ความโค้งของมุม ---------- */
  --radius:       8px;      /* การ์ด ตาราง ตัวเลือกคำตอบ (0 = เหลี่ยม, 16px = มน) */
  --radius-sm:    6px;      /* ช่องกรอก ป้ายเล็ก */
  --radius-btn:   6px;      /* ปุ่ม (ใส่ 999px ได้ปุ่มทรงแคปซูล) */

  /* ---------- ความกว้างหน้า ---------- */
  --container:    1180px;   /* ความกว้างสูงสุดของเนื้อหา */

  color-scheme: light;
}

/* =====================================================================
   โหมดมืด — ใช้เมื่อเครื่องผู้ใช้ตั้งโหมดมืด (หรือเลือก "มืดเสมอ" ในหน้าตาเว็บ)
   ถ้าแก้สีโหมดมืด ให้แก้ทั้ง 2 บล็อกด้านล่างให้เหมือนกัน
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --bg: #0f0f10;  --surface: #161618;  --text: #ededed;  --muted: #9a9a9a;
    --line: #262628;  --line-strong: #3a3a3d;
    --accent: #ededed;  --accent-text: #0f0f10;  --focus: #7a9bff;
    --ok: #5fcf8f;  --ok-bg: #12251a;  --warn: #e3b14f;  --warn-bg: #2a2212;
    --bad: #ff7b70;  --bad-bg: #2c1513;
    color-scheme: dark;
  }
}
:root[data-mode="dark"] {
  --bg: #0f0f10;  --surface: #161618;  --text: #ededed;  --muted: #9a9a9a;
  --line: #262628;  --line-strong: #3a3a3d;
  --accent: #ededed;  --accent-text: #0f0f10;  --focus: #7a9bff;
  --ok: #5fcf8f;  --ok-bg: #12251a;  --warn: #e3b14f;  --warn-bg: #2a2212;
  --bad: #ff7b70;  --bad-bg: #2c1513;
  color-scheme: dark;
}

/* =====================================================================
   พื้นที่เขียน CSS เพิ่มเองด้านล่างนี้ (ตัวอย่าง — ลบ /* */ ออกเพื่อใช้งาน)
   ===================================================================== */

/* หัวข้อใหญ่เป็นสีหลัก
h1 { color: var(--accent); }
*/

/* การ์ดมีเงา
.card { box-shadow: 0 2px 12px rgba(0,0,0,.06); }
*/