## Buttons

The library exposes a button component stylesheet and design tokens. Variants are implemented via modifier classes.

### Variants
- Primary: `.ccl-btn.ccl-btn--primary`
- Secondary: `.ccl-btn.ccl-btn--secondary`
- Tertiary: `.ccl-btn.ccl-btn--tertiary`
- Destructive: `.ccl-btn.ccl-btn--destructive`
- Sizes: `.ccl-btn--sm`, `.ccl-btn--lg`
- Loading: `.ccl-btn--loading` + `.spinner` child

### Basic usage
```html
<button class="ccl-btn ccl-btn--primary">Primary</button>
<button class="ccl-btn ccl-btn--secondary">Secondary</button>
<button class="ccl-btn ccl-btn--tertiary">Tertiary</button>
<button class="ccl-btn ccl-btn--destructive">Delete</button>
```

### Sizes
```html
<button class="ccl-btn ccl-btn--primary ccl-btn--sm">Small</button>
<button class="ccl-btn ccl-btn--primary">Medium</button>
<button class="ccl-btn ccl-btn--primary ccl-btn--lg">Large</button>
```

### Loading state
```html
<button class="ccl-btn ccl-btn--primary ccl-btn--loading" disabled>
  <span class="spinner" aria-hidden="true"></span>
  Saving...
</button>
```

### Overriding with tokens
```css
:root, :host {
  --color-primary-default: #f97316; /* Make primary orange */
  --radius-md: 0.5rem;              /* Rounder corners */
  --motion-default: 200ms ease-out; /* Faster hover */
}
```

### Accessibility
- Focus ring is driven by `--color-primary-default` via the `:focus` style.
- Disabled buttons use `--color-surface-default` and `--color-background-surface`.