/* ==========================================================================
   shared/tokens.css
   สี, ฟอนต์, base reset — ไฟล์เดียวคุมทุกหน้า (index, karaoke, และหน้าอนาคต)
   ========================================================================== */

:root{
  --ink:#1f2a24;
  --muted:#6b7a72;
  --line:#e4e9e6;
  --panel:#ffffff;
  --accent:#16a34a;
  --accent-dark:#0f8a44;
  --accent-soft:#e7f7ee;
  --blue:#3b82f6;
  --purple:#7c5cff;
  --orange:#f5a524;
  --bad:#e0533f;
  --bad-soft:#fbe9e6;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:'Prompt', sans-serif;
  background-color:#F7FAF8;
  color:var(--ink);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  line-height:1.8; /* กันสระบน-ล่าง (ั ี ึ ๊ ่ ้ ๋ ุ ู) โดนตัด */
  transition:background-color .2s ease, color .2s ease;
}

/* ---------- โหมดมืด (คุมค่าสีที่นี่ที่เดียว ทุก component ที่ใช้ var(--xxx) จะเปลี่ยนตาม) ---------- */
body.dark{
  --ink:#e7f2ec;
  --muted:#93a89d;
  --line:#2a3630;
  --panel:#1c2621;
  --accent-soft:#1e3a2a;
  --bad-soft:#3a201c;
  background-color:#0f1512;
}