Design it once.
AI builds it exactly.

You are implementing a UI component in this codebase. Match the project's existing component conventions for file placement and exports. Implement the component below as a React component styled with Tailwind CSS. Where Tailwind has no utility for an exact value, use arbitrary values (e.g. `rounded-[8px]`). Follow this spec exactly; every value is intentional. Do not substitute your own design taste, do not round values, and do not add visual features the spec does not mention.

## Component: Button

### Default state
- Background: #18181B
- Text color: #FAFAFA
- Corner radius: 8px
- Padding: 10px vertical, 16px horizontal
- Border: none
- Font size: 14px (line-height: 1.25)
- Font weight: 500
- Shadow: none
- Transition: background-color 150ms ease-out

## Implementation rules
- **Visible focus ring**: Style keyboard focus with `:focus-visible` (never bare `:focus`): a 2px outline offset 2px from the element, using a high-contrast color. Never remove focus outlines without an equally visible replacement.
- **Respect reduced motion**: Wrap all transitions/animations in `@media (prefers-reduced-motion: no-preference)` or disable them under `prefers-reduced-motion: reduce`. Motion must be an enhancement, never a requirement.
- **Transition only listed properties**: Transition exactly the properties listed in the spec; never use `transition: all`. Keep durations as specified; do not add extra animated properties.
- **Minimum hit target**: Ensure the interactive hit target is at least 44×44px. If the visual element is smaller, extend the clickable area with padding or a pseudo-element without changing the visual size.
- **Disabled state**: For the disabled state: set `cursor: not-allowed` on a wrapper (disabled elements don't fire pointer events), reduce opacity to ~50% unless the spec overrides colors explicitly, and suppress all hover/active effects.
- **Font smoothing on dark fills**: When rendering light text on a dark background, apply `-webkit-font-smoothing: antialiased` and `-moz-osx-font-smoothing: grayscale` to avoid overly bold-looking text.
- **Text contrast**: Text must meet WCAG AA contrast (4.5:1 against its background; 3:1 for text ≥18.66px bold). If a specified color pair falls short, keep the spec colors but flag the contrast issue in a code comment.
- **No hover layout shift**: Hover/focus styles must not change the element's layout size. If a border appears on interaction, reserve its space with a transparent border in the default state.