/* =========================================================
   themes.css: สีและธีมทั้งหมดอยู่ที่นี่ที่เดียว
   ธีมปัจจุบัน: Vellum Annotated Page (Charcoal + Graphite + Paper + Silver) ใช้ทุกจอ

   แก้สีที่พบบ่อย:
   - โทนเงิน (ชื่อตัวแปรยังเป็น gold) → --gold, --gold-soft, --gold-deep
   - พื้นหลังหน้า                    → --bg
   - พื้นการ์ด                       → --card
   - ช่องกรอกข้อความ                 → --field
   - ระดับความเสี่ยงในผลตรวจ         → กลุ่ม "ระดับความเสี่ยง"
   - กลับไปธีมสว่าง                  → ตั้ง data-theme="light" ที่ <html>
   ========================================================= */

/* ---------- 1. ธีมหลัก (Vellum Black Label) ---------- */
:root{
  color-scheme:dark;

  /* พื้นหลังและการ์ด (Vellum: ชาร์โคล + กราไฟต์) */
  --bg:#0c0c0d;
  --card:#141415;
  --card-edge:rgba(236,233,226,.08);
  --item:#18181a;
  --field:#0f0f10;
  --border:#2a2a2d;
  --ghost:#1e1e20;
  --shadow:0 0 0 1px rgba(236,233,226,.04);

  /* ตัวอักษร (ขาวนวลแบบกระดาษ) */
  --text:#ece9e2;
  --muted:#8c8d91;

  /* สีเน้น: เงิน (ชื่อตัวแปร --gold คงไว้เพราะไฟล์ CSS อื่นอ้างถึง) */
  --gold:#b8bbc1;
  --gold-soft:#d9dbdf;
  --gold-deep:#8b8e95;
  --on-gold:#0c0c0d;
  --focus:rgba(217,219,223,.5);

  /* ระดับความเสี่ยง (ค่าใน JSON: high = ควรตรวจละเอียด, mid = ควรระวัง, low = เสี่ยงต่ำ)
     โทนลดความจัดลง แต่ยังแยกสามระดับได้ชัด และหน้ารายงานมีป้ายข้อความกำกับเสมอ */
  --high:#211214;  --highText:#e9a9a5;  --highBorder:#b4524f;
  --mid:#18191b;   --midText:#dcc489;   --midBorder:#b38a35;
  --low:#12181e;   --lowText:#a8c3d4;   --lowBorder:#5a88a6;

  /* สถานะและไฮไลต์ */
  --ok:#9bcdb0;
  --warn:#dcc489;
  --mark:rgba(236,233,226,.18);
  --markText:#ffffff;

  /* รูปทรง */
  --radius-card:8px;
  --radius-btn:6px;
}

/* ---------- 2. ธีมสว่าง (ใช้เมื่อตั้ง data-theme="light") ---------- */
:root[data-theme="light"]{
  color-scheme:light;

  --bg:#f4f6fb;
  --card:#ffffff;
  --card-edge:#e5e7eb;
  --item:#fafafa;
  --field:#ffffff;
  --border:#d1d5db;
  --ghost:#e5e7eb;
  --shadow:0 2px 8px rgba(0,0,0,.06);

  --text:#1f2937;
  --muted:#6b7280;

  --gold:#2563eb;
  --gold-soft:#3b82f6;
  --gold-deep:#1d4ed8;
  --on-gold:#ffffff;
  --focus:rgba(37,99,235,.45);

  --high:#fee2e2;  --highText:#991b1b;  --highBorder:#dc2626;
  --mid:#fef3c7;   --midText:#92400e;   --midBorder:#f59e0b;
  --low:#e0f2fe;   --lowText:#075985;   --lowBorder:#0284c7;

  --ok:#15803d;
  --warn:#b45309;
  --mark:#fde047;
  --markText:#1f2937;
}