# @duo/styles

Global **base** styles and **prefixed utilities** (`duo-u-*`) for native elements. This package uses design tokens from `@duo/tokens` but does **not** import them — you must load tokens first so `var(--duo-…)` resolves.

## Import order

Load CSS in this order:

1. **Tokens** — `@duo/tokens/css` (and a theme file if you use themed overrides).
2. **Styles** — `@duo/styles` (or `base.css`, `forms.css`, `utilities.css` separately).
3. **Application** — your app or product styles.

Example (Vite / Storybook entry or preview):

```ts
import "@duo/tokens/css";
import "@duo/styles";
```

## Layers

Styles are grouped with cascade layers (declaration in `base.css`):

- `duo-reset` — minimal shared reset (e.g. box sizing).
- `duo-base` — typography, document-level primitives, and **native form field** styling (`.duo-field`, `.duo-field__control`, `.duo-button` — see `forms.css`).
- `duo-utilities` — optional layout helpers; **always** use the `duo-u-` prefix for new utilities.

Native form layout and control chrome live in **`forms.css`** so apps can omit it only if they bring their own form styles (most apps should import the aggregate `@duo/styles` entry).

## Peer dependency

`@duo/tokens` is a **peer** dependency. Install both packages in consuming apps.

## Related decisions

See [Styling and web components](../../docs/decisions/styling-and-web-components.md).