/* ==========================================
   ตัวแปรสีพื้นฐาน (Variables) & Base Elements
   ========================================== */
:root {
  --brand-50: #f0f5ff;
  --brand-500: #ff9654;
  --brand-600: #ff7220;
  --brand-700: #d8681d;
  --indigo-600: #ff8544;
  --indigo-700: #e85410;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-1000: #020617;
  --rose-50: #fff1f2;
  --rose-100: #ffe4e6;
  --rose-600: #e11d48;
  /* ใช้ตัวเดียว ณ ตอนนี้: ไอคอนสเต็ปที่ทำผ่านแล้ว (.step-item.completed .step-icon ใน form.css) เดิมอ้างถึงตัวแปรนี้
     ทั้งที่ไม่เคยประกาศไว้เลย ทำให้พื้นหลังไอคอนที่ควรเป็นสีเขียวกลายเป็นโปร่งใส มองไม่เห็นเครื่องหมายถูกข้างในเลย */
  --emerald-400: #34d399;
  /* เข้มกว่า emerald-400 ไว้ใช้เป็นสีตัวหนังสือโดยเฉพาะ (เช่น checklist เงื่อนไขรหัสผ่าน) เพราะ emerald-400 อ่อนไปจนคอนทราสต์กับพื้นขาวไม่พอ */
  --emerald-600: #059669;
}

/* เดิมไม่เคยประกาศ background-color ของ body ไว้เลยทั้งเว็บ (พึ่งพื้นหลังขาว default ของเบราว์เซอร์อย่างเดียว)
   ปกติมองไม่ออกเพราะแต่ละ section มีพื้นหลังของตัวเองคลุมเต็มพื้นที่อยู่แล้ว แต่บางหน้า (เช่น staff/academic.html)
   มีช่องว่างที่ section ไม่ได้ประกาศพื้นหลังไว้ ถ้าเบราว์เซอร์/OS อยู่ในโหมดมืดจะโป่งเป็นสีเข้มผิดที่ขึ้นมาแทน
   ประกาศไว้ตรงนี้กันไว้เป็นค่าเริ่มต้นของทั้งเว็บเลยชัวร์กว่า */
body {
  font-family: 'Prompt', 'Sarabun', 'Segoe UI', Tahoma, sans-serif;
  color: var(--slate-700);
  background-color: var(--slate-50);
  line-height: 1.5;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

button {
  font-family: inherit;
}