Design it once.
AI builds it exactly.

You are implementing a UI component in this codebase. Implement the component below as a React component styled with Tailwind CSS. 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. Where Tailwind has no utility for an exact value, use arbitrary values (e.g. `rounded-[8px]`). Match the project's existing component conventions for file placement and exports.

## 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 `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.