/*
  SJT Design System — Base Components
  ใช้คู่กับ tokens.css เสมอ (ต้อง import/link tokens.css ก่อนไฟล์นี้)
*/

.btn {
  font: var(--btn-font);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  border: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
}
/* ทุกสถานะ (รวม :hover/:focus) ต้องกำหนด color เอง — ไม่งั้น a:hover ของลิงก์ทั่วไปจะทับ
   ทำให้ตัวอักษรกลืนกับสีพื้นปุ่มตอนเอาเมาส์ชี้ */
.btn, .btn:hover, .btn:focus-visible { color: var(--btn-fg); }
.btn:hover { background: var(--btn-bg-hover); }
/* .btn-primary / .btn-secondary / .btn-outline คงชื่อไว้ให้โค้ดเก่า แต่หน้าตาเหมือนกันหมด (ดู "ปุ่ม" ท้าย site.css) */

.card {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm), var(--shadow-md);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 11.5px var(--font-mono);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
}
.tag-primary { background: var(--primary-pale); color: var(--primary-deep); }
.tag-secondary { background: var(--secondary-pale); color: var(--secondary-deep); }
.tag-success { background: var(--success-bg); color: var(--success); }
.tag-warning { background: var(--warning-bg); color: var(--warning); }
.tag-danger  { background: var(--danger-bg);  color: var(--danger); }

.input {
  font: 400 14px var(--font-body);
  padding: 9px 13px;
  border: 1.5px solid var(--outline);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
}
.input:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border-bottom: 1px solid var(--outline);
  padding: 16px 24px;
}

/* ---- utility: icon badge (used for quick-link cards, news thumbs) ---- */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--primary-pale);
  color: var(--primary-deep);
}
.icon-badge svg { width: 22px; height: 22px; }
.icon-badge .material-symbols-outlined { font-size: 24px; }
.icon-badge.secondary { background: var(--secondary-pale); color: var(--secondary-deep); }