# Components

IO component library. Each component uses design tokens from tokens.css.

## Buttons

```html
<!-- Primary (light background) -->
<a href="#" class="btn-primary">Get started</a>

<!-- Secondary (light background) -->
<a href="#" class="btn-secondary">Learn more →</a>

<!-- Primary (dark background) -->
<a href="#" class="btn-dark-primary">Enter Platform</a>

<!-- Secondary (dark background) -->
<a href="#" class="btn-dark-secondary">Sign in</a>
```

## Cards

```html
<!-- Light card -->
<div class="card-io">...</div>

<!-- Dark card -->
<div class="card-io-dark">...</div>
```

## Navigation

Frosted glass nav. Transparent on top, blurs on scroll.
Component: `components/nav.tsx`

## Footer

5-column link grid + legal row.
Component: `components/footer.tsx`

## Layout Classes

```html
<div class="container-io">980px max, centered</div>
<div class="container-io-wide">1200px max, centered</div>
<div class="container-io-narrow">640px max, centered</div>

<section class="section-padding">80px vertical padding</section>
<section class="section-padding-lg">120px vertical padding</section>
```