@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
  font-family: 'Pretendard', 'Malgun Gothic', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #f1f5f9;
  color: #1e293b;
}

.sidebar-item {
  @apply flex items-center gap-3 px-4 py-2.5 text-sm text-slate-400 hover:bg-slate-800 hover:text-white rounded-lg cursor-pointer transition-colors;
}

.sidebar-item.active {
  @apply bg-blue-700 text-white;
}

.card {
  @apply bg-white rounded-xl shadow-sm border border-slate-100 p-5;
}

.btn-primary {
  @apply px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors;
}

.btn-secondary {
  @apply px-4 py-2 bg-slate-100 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-200 transition-colors;
}

.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.table-header {
  @apply px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider;
}

.table-cell {
  @apply px-4 py-3 text-sm text-slate-700;
}

/*
 * UIWS 이식 컴포넌트(components/uiws/ui.tsx) 디자인 토큰.
 * 색상 하드코딩 금지 — 컴포넌트는 var(--uiws-*)만 사용한다.
 * 기본은 HRM 라이트 테마와 정합. OS 다크 모드 시 자동 전환(대비/가독성 보존).
 * 전역 HRM 테마를 덮어쓰지 않도록 토큰만 정의(모듈 스코프).
 */
:root {
  --uiws-surface: #ffffff;
  --uiws-surface-2: #f1f5f9;
  --uiws-border: #e2e8f0;
  --uiws-text: #1e293b;
  --uiws-text-muted: #64748b;
  --uiws-text-faint: #94a3b8;
  --uiws-primary: #2563eb;
  --uiws-primary-contrast: #ffffff;
  --uiws-primary-soft: #eff6ff;
  --uiws-input-bg: #ffffff;
  --uiws-row-hover: #f8fafc;
  --uiws-danger: #dc2626;
  --uiws-success: #16a34a;
  --uiws-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --uiws-surface: #1e293b;
    --uiws-surface-2: #0f172a;
    --uiws-border: #334155;
    --uiws-text: #e2e8f0;
    --uiws-text-muted: #94a3b8;
    --uiws-text-faint: #64748b;
    --uiws-primary: #3b82f6;
    --uiws-primary-contrast: #ffffff;
    --uiws-primary-soft: #1e3a5f;
    --uiws-input-bg: #0f172a;
    --uiws-row-hover: #273449;
    --uiws-danger: #f87171;
    --uiws-success: #4ade80;
    --uiws-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}
