/* ทุกสีของเว็บอยู่ที่นี่ที่เดียว — page.css, index.html, mock-exam.css และ
   stickman.css ไม่มีค่าสีของตัวเองอีกแล้ว มีแต่ var(--…) ที่ชี้มาที่นี่
   (มีเทสต์กันไว้: ค่าสีที่เขียนตรงๆ นอกไฟล์นี้ = เทสต์ล้ม)

   ชุดมืดคือค่าเดิมของเว็บทุกตัว ไม่มีอะไรเปลี่ยนสำหรับคนที่ไม่กดสลับ
   ชุดสว่างต้องนิยามโทเคน "ครบทุกตัว" เท่าชุดมืด — โทเคนที่มีแค่ฝั่งเดียว
   คือบั๊กคลาสสิกของธีมสลับ: ข้อความสีหนึ่งไปโผล่บนพื้นอีกธีม (มีเทสต์กันเช่นกัน)

   ค่าเริ่มต้นคือมืด (Art ตัดสิน 12 ก.ย. 2569) ไม่ตาม prefers-color-scheme —
   ทุกคนที่เปิดเว็บอยู่วันนี้เห็นแบบมืด การสลับไปตามเครื่องจะทำให้หน้าเปลี่ยน
   ให้คนที่ไม่ได้ขอ · คนที่อยากได้สว่างกดเอง แล้วเว็บจำไว้ (theme.js) */

:root {
  --bg: #050506;            --bg-rgb: 5,5,6;
  --fg-strong: #fff;        /* หัวเรื่อง ตัวเน้น */
  --fg: #f4f5f7;            /* ตัวหนังสือหลัก */
  --fg-2: #e8ebf0;          /* ตัวหนังสือในกล่อง prompt / ปุ่มผี */
  --fg-3: #c8ccd4;          /* เนื้อบทความ */
  --fg-mute: #8a8f9c;       /* คำอธิบายรอง */
  --fg-dim: #6b7078;        /* ป้ายเดือน ยอดคลิก footer */
  --fg-faint: #5a606c;      /* ของที่จางที่สุดที่ยังต้องอ่านออก */
  --fg-nav: #aeb3bf;        /* ลิงก์ในแถบบน */
  /* "หมึก" ของกระจก — ทุก rgba(255,255,255,x) ที่เป็นพื้น/ขอบจางๆ บนพื้นมืด
     ฝั่งสว่างกลายเป็น rgba(0,0,0,x) โดยอัตโนมัติ ความโปร่งเท่าเดิม */
  --ink-rgb: 255,255,255;
  --on-brand: #050506;      /* ตัวหนังสือบนปุ่มไล่สีของแบรนด์ (เท่ากันทั้งสองธีม) */
  --on-accent: #0b0b0f;     /* ตัวหนังสือบนปุ่มสีเดี่ยว — ฝั่งสว่างปุ่มเข้มขึ้น ตัวจึงเป็นขาว */

  --cyan: #22d3ee;          --cyan-rgb: 34,211,238;    --cyan-soft: #7fe6f5;
  --indigo: #818cf8;        --indigo-rgb: 99,102,241;  --indigo-soft: #a5b4fc;
  --purple: #c084fc;        --purple-rgb: 168,85,247;
  --gold: #fbbf24;          --gold-rgb: 245,158,11;
  /* เหลืองเป็นคนละสีกับทอง และใช้ที่เดียว: ป้ายราคาของจริง (ดู .price-paid ใน page.css)
     ทองใช้กับ VIP / หมวดที่มีของขาย / ป้าย BETA / สูตรในบทความ */
  --yellow: #fde047;        --on-yellow: #3d3000;
  --green: #34d399;         --green-rgb: 16,185,129;
  --slate: #94a3b8;         --slate-rgb: 148,163,184;
  --red: #f87171;           --red-rgb: 248,113,113;    --red-soft: #fca5a5;
  --lime: #8ed11a;          --lime-rgb: 118,185,0;
  --blue: #4da3ff;          --blue-rgb: 0,113,227;
  --sky: #38bdf8;           --sky-rgb: 56,189,248;

  /* สีทึบที่มีตัวหนังสือขาวทับ — เท่ากันทั้งสองธีม เพราะขาวบนสีเหล่านี้อ่านออกทั้งคู่ */
  --indigo-solid: #6366f1;  --indigo-solid-hover: #9aa3fb;
  --green-solid: #10b981;
  --red-solid: #ef4444;
  --on-solid: #fff;
  --scrim: #0b0b0f;         /* พื้นกรอบวิดีโอ — ดำเท่ากันทั้งสองธีม */
  --well: rgba(0,0,0,0.28);        /* ช่องกรอกใน Stickman — เข้มกว่าพื้นเล็กน้อยทั้งสองธีม */

  /* โลโก้และปุ่มหลัก — ตัวตนของแบรนด์ ไม่เปลี่ยนตามธีม */
  --brand-grad: linear-gradient(135deg, #22d3ee, #6366f1);
  /* หัวเรื่องไล่สีบนหน้าแรก — ฝั่งสว่างต้องเข้มกว่านี้ ไม่งั้นจางหายบนพื้นขาว */
  --grad-text: linear-gradient(115deg, #22d3ee, #6366f1 55%, #a855f7);
}

:root[data-theme="light"] {
  --bg: #f6f7f9;            --bg-rgb: 246,247,249;
  --fg-strong: #0b0c10;
  --fg: #15171c;
  --fg-2: #2a2e36;
  --fg-3: #3d424c;
  --fg-mute: #5b6270;
  --fg-dim: #737b89;
  --fg-faint: #9aa2af;
  --fg-nav: #3f4552;
  --ink-rgb: 0,0,0;
  --on-brand: #050506;
  --on-accent: #fff;

  /* สีเน้นทุกตัวเข้มลงหนึ่งขั้น — ค่ามืดเป็นเฉดสว่างที่ทำมาเพื่อวางบนดำ
     เอามาวางบนขาวตรงๆ จะอ่านไม่ออก (cyan #22d3ee บนขาว contrast ~1.9:1) */
  /* ฟ้าไม่เหมือนเขียวกับทอง: มันไม่ได้นั่งบนพื้นป้ายของตัวเอง แต่นั่งบนพื้นหน้า
     (หัวหมวด ลิงก์ bullet) และบนพื้นฟ้าจาง (ปุ่ม copy กล่อง prompt ไอคอนการ์ด)
     ต้องผ่านทั้งสองฉาก · #0e93ad ได้แค่ 3.38 บนพื้นหน้า ตัวนี้ได้ 7.29
     (แก้ 12 ก.ย. 2569 — ต่ำสุดในเว็บก่อนแก้)

     ขยับเฉพาะสีตัวหนังสือ ไม่ขยับ triplet — ต่างจากเขียวกับทองที่ triplet คือ
     พื้นป้ายของมันเอง · ฟ้า triplet ส่วนใหญ่เป็นของตกแต่ง (ดวงเรืองแสงในฮีโร่
     มุมการ์ด เส้นกริด) ถ้าทำให้เข้มตาม ฮีโร่ฝั่งสว่างจะทึบขึ้นโดยไม่ได้อะไรคืน —
     วัดแล้วเก็บ triplet เดิมไว้ยังได้ contrast ดีกว่าเล็กน้อยด้วย (6.37 vs 6.03) */
  --cyan: #065a6c;          --cyan-rgb: 14,147,173;    --cyan-soft: #054e5e;
  --indigo: #4f56e0;        --indigo-rgb: 79,86,224;   --indigo-soft: #4338ca;
  --purple: #8b3fd6;        --purple-rgb: 139,63,214;
  /* เข้มกว่าเดิมมาก — #b07a00 วัดได้ 3.06 บนพื้นป้ายทองของตัวเอง ต่ำกว่าเกณฑ์
     ตัวนี้ได้ 5.12 · ขยับ triplet ตามด้วย พื้นป้ายกับขอบจะได้เข้มขึ้นพร้อมกัน
     ไม่ใช่ทองใหม่วางบนพื้นทองเก่า (12 ก.ย. 2569) */
  --gold: #7a5800;          --gold-rgb: 122,88,0;
  /* เหลืองฝั่งสว่างยังเป็นเหลืองจริง เพราะ .price-paid เป็นชิปทึบ ไม่ใช่พื้นจาง —
     เหลืองที่จางพอจะเป็นพื้นบนขาว จะอ่านตัวหนังสือไม่ออก และเหลืองที่เข้มพอจะอ่านออก
     ก็ไม่เหลืองอีกต่อไป (วัดแล้วดีที่สุด 4.85 และหน้าตาเป็นน้ำตาลมะกอก) */
  --yellow: #facc15;        --on-yellow: #3d3000;
  /* เข้มกว่าที่คำนวณจาก contrast ขั้นต่ำ เพราะป้าย "ฟรี" อยู่บนพื้นเขียวจางของตัวเอง
     ไม่ใช่บนพื้นหน้า · วัดที่ #15803d ได้ 4.0 เทียบกับฝั่งมืดที่ 9.29 — จืดจริง
     ตัวนี้ได้ 6.03 บนพื้นป้าย และ 8.12 บนพื้นหน้า (แก้ 12 ก.ย. 2569 ตามที่ Art ทัก) */
  --green: #0d5729;         --green-rgb: 13,87,41;
  --slate: #64748b;         --slate-rgb: 100,116,139;
  --red: #dc2626;           --red-rgb: 220,38,38;      --red-soft: #b91c1c;
  --lime: #4d7c0f;          --lime-rgb: 77,124,15;
  --blue: #1d4ed8;          --blue-rgb: 29,78,216;
  --sky: #0369a1;           --sky-rgb: 3,105,161;

  --indigo-solid: #6366f1;  --indigo-solid-hover: #4f56e0;
  --green-solid: #10b981;
  --red-solid: #ef4444;
  --on-solid: #fff;
  --scrim: #0b0b0f;         /* พื้นกรอบวิดีโอ — ดำเท่ากันทั้งสองธีม */
  --well: rgba(0,0,0,0.05);        /* ช่องกรอกใน Stickman — เข้มกว่าพื้นเล็กน้อยทั้งสองธีม */

  --brand-grad: linear-gradient(135deg, #22d3ee, #6366f1);
  --grad-text: linear-gradient(115deg, #0e93ad, #4f56e0 55%, #8b3fd6);
}

/* ---- ปุ่มสลับ — อยู่ในแถบบนของทุกหน้าที่มีธีม ----
   44px เพราะเป็นของที่กดบนมือถือ · แสดงไอคอนของ "ธีมที่จะไป" ไม่ใช่ธีมปัจจุบัน:
   อยู่มืดเห็นพระอาทิตย์ อยู่สว่างเห็นพระจันทร์ — ปุ่มบอกว่ากดแล้วได้อะไร */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; padding: 0; border-radius: 10px;
  cursor: pointer; font: inherit; color: var(--fg-nav);
  background: transparent; border: 1px solid rgba(var(--ink-rgb), 0.12);
  transition: color .2s, border-color .2s, background .2s;
}
.theme-toggle:hover { color: var(--fg-strong); border-color: rgba(var(--ink-rgb), 0.28);
  background: rgba(var(--ink-rgb), 0.05); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: block; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }
/* ปุ่มกับลิงก์กลับอยู่ชิดกันฝั่งขวาของแถบบน */
.nav-right { display: flex; align-items: center; gap: 8px; }

@media print { .theme-toggle { display: none !important; } }