/* ============================================================
 * Pukdee Design System — Base v1.0
 * 
 * Reset + Typography + Utility classes พื้นฐาน
 * Load หลัง tokens.css ทุกครั้ง
 * ============================================================ */

/* ----------------------------------------------------------
 * 1. FONT LOADING (Prompt — TH/EN ready)
 * ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;500&display=swap');

/* Tabler Icons (Webfont 5,900+ icons) — self-host เพิ่ม performance/privacy */
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.34.0/dist/tabler-icons.min.css');

/* ----------------------------------------------------------
 * 2. RESET (Modern CSS Reset — Andy Bell's adaptation)
 * ---------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  background-color: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: var(--brand-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--brand-700);
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

/* Remove animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ----------------------------------------------------------
 * 3. TYPOGRAPHY
 * ---------------------------------------------------------- */
h1, .h1 {
  font-size: var(--text-h1);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--text-heading);
  letter-spacing: -0.01em;
}

h2, .h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--text-heading);
}

h3, .h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--text-heading);
}

.text-body {
  font-size: var(--text-body);
  color: var(--text-body);
}

.text-sm {
  font-size: var(--text-sm);
  color: var(--text-body);
}

.text-cap {
  font-size: var(--text-cap);
  color: var(--text-sub);
  line-height: var(--leading-snug);
}

.text-mini {
  font-size: var(--text-mini);
  font-weight: var(--weight-medium);
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.text-muted    { color: var(--text-mute); }
.text-sub      { color: var(--text-sub); }
.text-success  { color: var(--success-text); }
.text-warning  { color: var(--warning-text); }
.text-danger   { color: var(--danger-text); }
.text-info     { color: var(--info-text); }
.text-brand    { color: var(--brand-500); }

.text-mono     { font-family: var(--font-mono); }

/* ----------------------------------------------------------
 * 4. ACCESSIBILITY — Focus visible + Skip link
 * ---------------------------------------------------------- */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-tooltip);
  padding: var(--space-3) var(--space-4);
  background: var(--brand-500);
  color: #fff;
  font-weight: var(--weight-medium);
  border-radius: 0 0 var(--radius-md) 0;
}

.skip-to-content:focus {
  left: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------
 * 5. ICON BASE (Tabler Icons)
 * ---------------------------------------------------------- */
.ti {
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  vertical-align: -0.125em;
}

.ti-sm { font-size: 14px; }
.ti-md { font-size: 18px; }
.ti-lg { font-size: 24px; }
.ti-xl { font-size: 32px; }

/* ----------------------------------------------------------
 * 6. LAYOUT HELPERS (minimal — เลือกใช้ Tailwind สำหรับซับซ้อน)
 * ---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-sm);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--container-padding-lg);
  }
}

.stack-1 > * + * { margin-top: var(--space-1); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }

.flex      { display: flex; }
.flex-col  { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* ----------------------------------------------------------
 * 7. SCROLLBAR (subtle, ไม่รบกวนตา)
 * ---------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--text-mute);
}

/* ----------------------------------------------------------
 * 8. SELECTION
 * ---------------------------------------------------------- */
::selection {
  background: var(--brand-200);
  color: var(--brand-900);
}

/* ----------------------------------------------------------
 * 7. TABLER ICON SIZE — Tailwind utility compat
 *    Lucide ใช้ w-N/h-N (SVG width/height)
 *    Tabler webfont ใช้ font-size — ตัว rule นี้ map ให้
 * ---------------------------------------------------------- */
i[class*="ti-"].w-3,  i[class*="ti-"].h-3   { font-size: 12px; }
i[class*="ti-"].w-3\.5, i[class*="ti-"].h-3\.5 { font-size: 14px; }
i[class*="ti-"].w-4,  i[class*="ti-"].h-4   { font-size: 16px; }
i[class*="ti-"].w-5,  i[class*="ti-"].h-5   { font-size: 20px; }
i[class*="ti-"].w-6,  i[class*="ti-"].h-6   { font-size: 24px; }
i[class*="ti-"].w-7,  i[class*="ti-"].h-7   { font-size: 28px; }
i[class*="ti-"].w-8,  i[class*="ti-"].h-8   { font-size: 32px; }
i[class*="ti-"].w-9,  i[class*="ti-"].h-9   { font-size: 36px; }
i[class*="ti-"].w-10, i[class*="ti-"].h-10  { font-size: 40px; }
i[class*="ti-"].w-12, i[class*="ti-"].h-12  { font-size: 48px; }

/* และทำให้ icon width/height auto (ไม่ใช้ width attribute ของ Tailwind สำหรับ font icon) */
i[class*="ti ti-"] {
  width: auto;
  height: auto;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ----------------------------------------------------------
 * 8. UNIVERSAL DARK MODE OVERRIDES
 *
 * Map Tailwind hardcoded slate/zinc colors → dark mode equivalents
 * ใช้ html.dark selector — ครอบคลุมทุกหน้าที่ใช้ Tailwind utility
 * ตอน user เปลี่ยน theme → สีปรับตามอัตโนมัติ
 * ---------------------------------------------------------- */
html.dark body { background-color: #18191A; color: #E4E6EB; }

/* Backgrounds — light → dark */
html.dark .bg-white { background-color: #242526 !important; }
html.dark .bg-slate-50 { background-color: #18191A !important; }
html.dark .bg-slate-100 { background-color: #2A2D35 !important; }
html.dark .bg-slate-200 { background-color: #3E4042 !important; }
html.dark .bg-zinc-50 { background-color: #18191A !important; }
html.dark .bg-zinc-100 { background-color: #2A2D35 !important; }
html.dark .bg-zinc-900,
html.dark .bg-zinc-950 { background-color: #0F1011 !important; }

/* Text colors */
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-zinc-900,
html.dark .text-zinc-800 { color: #E4E6EB !important; }
html.dark .text-slate-700,
html.dark .text-zinc-700 { color: #D1D5DB !important; }
html.dark .text-slate-600,
html.dark .text-slate-500,
html.dark .text-zinc-600,
html.dark .text-zinc-500 { color: #B0B3B8 !important; }
html.dark .text-slate-400,
html.dark .text-zinc-400 { color: #8A8D86 !important; }
html.dark .text-slate-300,
html.dark .text-zinc-300 { color: #6B7280 !important; }

/* Borders */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-zinc-100,
html.dark .border-zinc-200 { border-color: #3E4042 !important; }
html.dark .border-slate-300,
html.dark .border-zinc-300 { border-color: #4B5563 !important; }
html.dark .border-white { border-color: #3E4042 !important; }

/* Brand semantic — keep readable in dark */
html.dark .text-emerald-700,
html.dark .text-emerald-600 { color: #5DCAA5 !important; }
html.dark .text-blue-700,
html.dark .text-blue-600 { color: #85B7EB !important; }
html.dark .text-rose-700,
html.dark .text-rose-600 { color: #F09595 !important; }
html.dark .text-amber-700,
html.dark .text-amber-600 { color: #FAC775 !important; }
html.dark .text-indigo-700,
html.dark .text-indigo-600 { color: #A5B4FC !important; }
html.dark .text-violet-700,
html.dark .text-violet-600 { color: #C4B5FD !important; }

/* Light bg variants — adjust opacity to fit dark */
html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.1) !important; }
html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1) !important; }
html.dark .bg-rose-50 { background-color: rgba(244, 63, 94, 0.1) !important; }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1) !important; }
html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.1) !important; }
html.dark .bg-violet-50 { background-color: rgba(139, 92, 246, 0.1) !important; }
html.dark .bg-pink-50 { background-color: rgba(236, 72, 153, 0.1) !important; }

html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.15) !important; }
html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.15) !important; }
html.dark .bg-rose-100 { background-color: rgba(244, 63, 94, 0.15) !important; }
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.15) !important; }
html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.15) !important; }

/* Border variants for badges */
html.dark .border-emerald-200,
html.dark .border-emerald-100 { border-color: rgba(16, 185, 129, 0.3) !important; }
html.dark .border-blue-200,
html.dark .border-blue-100 { border-color: rgba(59, 130, 246, 0.3) !important; }
html.dark .border-rose-200,
html.dark .border-rose-100 { border-color: rgba(244, 63, 94, 0.3) !important; }
html.dark .border-amber-200,
html.dark .border-amber-100 { border-color: rgba(245, 158, 11, 0.3) !important; }
html.dark .border-indigo-200,
html.dark .border-indigo-100 { border-color: rgba(99, 102, 241, 0.3) !important; }

/* Forms — inputs/textareas/selects */
html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark textarea,
html.dark select {
  background-color: #18191A;
  border-color: #3E4042;
  color: #E4E6EB;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #6B7280; }

/* Hover states need tweaking */
html.dark .hover\:bg-slate-50:hover { background-color: rgba(255, 255, 255, 0.05) !important; }
html.dark .hover\:bg-slate-100:hover { background-color: rgba(255, 255, 255, 0.08) !important; }
html.dark .hover\:bg-white:hover { background-color: #242526 !important; }

/* ----------------------------------------------------------
 * 9. UNIVERSAL HOVER EFFECTS (DESIGN.md §6)
 * เพิ่ม smooth feedback ให้ปุ่มทุกที่ที่ไม่มี hover state เฉพาะตัว
 * ---------------------------------------------------------- */
button:not(:disabled),
a[href]:not([disabled]) {
  transition: color var(--transition-fast),
              background-color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
}

/* ----------------------------------------------------------
 * 10. MOBILE TOUCH TARGETS (accessibility)
 * Apple HIG: ≥ 44x44 px
 * ---------------------------------------------------------- */
@media (max-width: 767px) and (pointer: coarse) {
  /* Slightly increase tap area for small buttons */
  button:not(.tab-btn):not(.custom-checkbox):not(.toggle-input):not([type="checkbox"]):not([type="radio"]),
  a[href][role="button"] {
    min-height: 40px;
  }
}

/* ----------------------------------------------------------
 * 11. FOCUS VISIBLE (accessibility)
 * แสดง focus ring เฉพาะ keyboard navigation
 * ---------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}