@import "tailwindcss";

/* MENUPI Signage – Global Design System Tokens (strict black/white) */
:root {
  --ui-bg: #ffffff;
  --ui-fg: #000000;
  --ui-muted: #6b7280; /* gray-500 */
  --ui-border: #e5e7eb; /* gray-200 */
  --ui-surface: #ffffff;
  --ui-surface-2: #fafafa; /* gray-50 */
  --ui-radius: 12px;
  --ui-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
}

html, body {
  background: var(--ui-bg);
  color: var(--ui-fg);
  margin: 0;
  padding: 0;
}

/* Shared primitives as CSS classes (optional; TSX components also exist) */
.ui-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
}

.ui-card--flat {
  box-shadow: none;
}

.ui-btn {
  height: 44px;
  border-radius: var(--ui-radius);
  font-weight: 700;
  letter-spacing: 0.02em;
}