/* Friendly design system — token จาก .claude/skills/friendly/DESIGN.md
   ปรับฟอนต์เป็นตระกูลที่รองรับอักษรไทย (ดู CLAUDE.md หัวข้อ Design system) */

:root {
  /* --- สีพื้นฐานจาก DESIGN.md --- */
  --color-primary: #F2D9DC;
  --color-secondary: #D9F2D8;
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-danger: #DC2626;
  --color-surface: #FFFFFF;
  --color-text: #111827;

  /* --- โทนที่แตกออกมาเพื่อให้ contrast ผ่าน WCAG AA --- */
  --color-primary-ink: #9F3D52;   /* ชมพูเข้ม ใช้กับปุ่มหลักและ accent */
  --color-primary-soft: #FBF1F3;  /* ชมพูจางสำหรับพื้นหลังรอง */
  --color-success-soft: #E8F7EC;
  --color-warning-soft: #FDF2E3;
  --color-danger-soft: #FCEDED;

  --color-canvas: #F7F5F6;        /* พื้นหลังแอป ให้การ์ดขาวลอยขึ้นมา */
  --color-text-muted: #6B7280;
  --color-text-subtle: #9CA3AF;
  --color-border: #E8E6E7;
  --color-border-strong: #D5D2D4;

  /* --- typography: IBM Plex Sans Thai ครอบคลุมทั้งไทยและละติน --- */
  --font-primary: "IBM Plex Sans Thai", "Segoe UI", sans-serif;
  --font-display: "IBM Plex Sans Thai", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --text-xs: 0.8125rem; /* 13 */
  --text-sm: 0.875rem;  /* 14 */
  --text-md: 1rem;      /* 16 */
  --text-lg: 1.125rem;  /* 18 */
  --text-xl: 1.5rem;    /* 24 */
  --text-2xl: 2rem;     /* 32 */
  --text-3xl: 2.5rem;   /* 40 */

  /* --- spacing: compact density --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --focus-ring: 0 0 0 3px rgba(159, 61, 82, 0.28);
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md: 0 4px 16px rgba(17, 24, 39, 0.07);
  --shadow-lg: 0 18px 48px rgba(17, 24, 39, 0.12);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: var(--text-xl); font-weight: 600; }
h2 { font-size: var(--text-lg); font-weight: 600; }
h3 { font-size: var(--text-md); font-weight: 600; }

p { margin: 0 0 var(--space-3); }

.label-caps {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

/* ---------- ปุ่ม: default / hover / focus-visible / active / disabled ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-surface);
  background: var(--color-primary-ink);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms ease, box-shadow 140ms ease, transform 80ms ease;
}
.btn:hover { background: #8A3346; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn--secondary {
  color: var(--color-primary-ink);
  background: var(--color-primary);
}
.btn--secondary:hover { background: #ECC9CE; }

.btn--ghost {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}
.btn--ghost:hover { background: var(--color-canvas); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}