/* ==========================================================================
   1. กำหนดชุดสีหลัก (Color Palette) ด้วย CSS Variables
   ========================================================================== */
:root {
  --color-background: #e5e7eb; /* เทียบเท่า Tailwind gray-200 */
  
  --color-surface: #ffffff;    /* เทียบเท่า Tailwind white */
  --color-surface-alt: #f3f4f6; /* เทียบเท่า Tailwind gray-100 */
  --color-border: #d1d5db;    /* เทียบเท่า Tailwind gray-300 */

  --color-text-primary: #1f2937;  /* เทียบเท่า Tailwind gray-800 */
  --color-text-secondary: #6b7280;/* เทียบเท่า Tailwind gray-500 */
  
  --color-accent: #3a6cf7;         /* เทียบเท่า Tailwind blue-700 */
  --color-accent-hover: #1e40af;  /* เทียบเท่า Tailwind blue-800 */
  --color-accent-text: #ffffff;   /* สีตัวอักษรบนปุ่มสีน้ำเงิน */
}

/* ==========================================================================
   2. ตั้งค่าพื้นฐานของเว็บให้ใช้ชุดสีของเรา
   ========================================================================== */
body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: 'Noto Serif Thai', serif;
}

/* ==========================================================================
   3. สร้าง Custom Classes สำหรับองค์ประกอบต่างๆ
   ========================================================================== */

/* การ์ด (Card) สำหรับห่อหุ้มเนื้อหา */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem; /* 16px */
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
}

/* ปุ่มหลัก (สีน้ำเงิน) */
.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  font-weight: 700;
  border-radius: 0.5rem; /* 8px */
  transition: background-color 0.3s;
}
.btn-primary:hover {
  background-color: var(--color-accent-hover);
}

/* ปุ่มรอง (สีเทา) */
.btn-secondary {
  background-color: var(--color-surface-alt);
  color: var(--color-text-primary);
  font-weight: 600;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem; /* 8px */
  transition: background-color 0.2s;
}
.btn-secondary:hover {
  background-color: #e5e7eb; /* gray-200 */
}

/* ช่องกรอกข้อมูล (Input) */
.form-input {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem; /* 8px */
}
.form-input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-text), 0 0 0 4px var(--color-accent);
}