# CSS & Styling

Customize Lotus with semantic tokens and scoped CSS.

Lotus styles are built on Tailwind utilities and semantic CSS variables. The
theme exposes `--lotus-*` tokens for layout and shell styling, while shared MDX
components consume portable `--pl-*` variables.

## Theme tokens

Use `appearance` for normal color and radius customization:

```ts
appearance: {
  accent: 'blue',
  gray: 'neutral',
  radius: 'medium',
}
```

Use semantic tokens only when a project needs lower-level CSS overrides for
surfaces, text, or component geometry.

```css
:root {
  --lotus-surface: color-mix(in oklab, var(--lotus-gray-100) 70%, white);
  --lotus-radius-md: 0.5rem;
}
```

## Component bridge

Lotus maps component package variables to theme variables:

```css
--pl-text-strong: var(--lotus-text-strong);
--pl-text: var(--lotus-text);
--pl-text-muted: var(--lotus-text-muted);
--pl-background: var(--lotus-background);
--pl-accent: var(--lotus-accent);
```

This keeps `@prosefly/astro-components` portable while letting Lotus own the
site palette.