/* Design tokens จาก shadcn (radix-luma / neutral) - พอร์ตจาก globals.css
   เก็บค่าเป็น raw oklch components เพื่อให้ใช้ opacity modifier ของ tailwind ได้
   เช่น bg-primary/10 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&family=Inter:wght@100..900&display=swap');

:root {
  --background: 1 0 0;
  --foreground: 0.145 0 0;
  --card: 1 0 0;
  --card-foreground: 0.145 0 0;
  --popover: 1 0 0;
  --popover-foreground: 0.145 0 0;
  --primary: 0.205 0 0;
  --primary-foreground: 0.985 0 0;
  --secondary: 0.97 0 0;
  --secondary-foreground: 0.205 0 0;
  --muted: 0.97 0 0;
  --muted-foreground: 0.556 0 0;
  --accent: 0.97 0 0;
  --accent-foreground: 0.205 0 0;
  --destructive: 0.577 0.245 27.325;
  --border: 0.922 0 0;
  --input: 0.922 0 0;
  --ring: 0.708 0 0;
  --radius: 0.625rem;
}

.dark {
  --background: 0.145 0 0;
  --foreground: 0.985 0 0;
  --card: 0.205 0 0;
  --card-foreground: 0.985 0 0;
  --popover: 0.205 0 0;
  --popover-foreground: 0.985 0 0;
  --primary: 0.922 0 0;
  --primary-foreground: 0.205 0 0;
  --secondary: 0.269 0 0;
  --secondary-foreground: 0.985 0 0;
  --muted: 0.269 0 0;
  --muted-foreground: 0.708 0 0;
  --accent: 0.269 0 0;
  --accent-foreground: 0.985 0 0;
  --destructive: 0.704 0.191 22.216;
  --border: 0.45 0 0;
  --input: 0.45 0 0;
  --ring: 0.556 0 0;
}

* { font-family: "Noto Sans Thai", sans-serif; }
html, body { font-family: "Noto Sans Thai", sans-serif; }

body {
  background: oklch(var(--background));
  color: oklch(var(--foreground));
}

/* ซ่อน scrollbar แถบหมวดหมู่ */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* เปลี่ยนธีม light/dark แบบนุ่มนวล */
html { color-scheme: light dark; }
body { transition: background-color .2s ease, color .2s ease; }

/* Skeleton (shadcn) — ใช้ระหว่างโหลดรูป */
.skeleton {
  position: relative;
  overflow: hidden;
  background: oklch(var(--muted));
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, oklch(var(--foreground) / 0.06), transparent);
  animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }

/* รูปที่โหลดแล้วให้พื้นหลังโปร่ง (เอา skeleton ออกผ่าน onload) */
img.is-loaded { background: transparent !important; }
img.is-loaded::after { display: none; }