<!-- source-hash: 93b65bad78f61892d6bffdfdb828ce09 -->
Defines shared Tailwind CSS style atoms consumed by `Button` and `SplitButton` components, establishing a single source of truth for surface colors, border styles, and split-divider colors across all button variants.

## Key Components

- **`buttonSurfaceClasses`** — Record mapping each variant (`accent`, `outline`, `transparent`, `destructive`, `warning`) to Tailwind utility strings covering background, text, hover, active, and both `disabled:` / `aria-disabled:` states.
- **`outlineBorderClasses`** — Shared border string applied exclusively to the `outline` variant across all interactive states.
- **`splitDividerColorClasses`** — Record mapping each variant to its border color for the vertical seam separating the main and icon halves in split-button layouts.
- **`ButtonSurfaceVariant`** — Derived union type (`"accent" | "outline" | "transparent" | "destructive" | "warning"`) inferred from `buttonSurfaceClasses` keys.

> **`disabled:` vs `aria-disabled:`** — Both states are always paired. `disabled:` targets native `<button disabled>` elements; `aria-disabled:` handles `<a aria-disabled="true">` anchors, which do not support the CSS `:disabled` pseudo-class.

## Usage Example

```typescript
import {
  buttonSurfaceClasses,
  outlineBorderClasses,
  splitDividerColorClasses,
  type ButtonSurfaceVariant,
} from "./button-styles"

function getButtonClasses(variant: ButtonSurfaceVariant): string {
  const surface = buttonSurfaceClasses[variant]
  const border = variant === "outline" ? ` ${outlineBorderClasses}` : ""
  return `${surface}${border}`
}

// "accent" → bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover …
getButtonClasses("accent")

// Split-button divider color for "destructive"
const divider = splitDividerColorClasses["destructive"] // "border-ods-error-active"
```