# Email
A mail-safe baseline for HTML emails. This is `email.css`, imported separately
from the main stylesheet:
```css
@import "@elements/style/email";
```
In a scaffolded app it's already wired into `app/shared/styles/email.css`, which
every email's `style.css` imports.
## Why it's different
Mail clients (Gmail, Apple Mail, Outlook, web clients) are far stricter than
browsers. They can't reliably resolve CSS custom properties, they support
`@media` unevenly, and they often demand inline styles. So `email.css` breaks
from the rest of the package on purpose:
- **No CSS variables.** Every value is a raw px or hex so the CSS renders the
same everywhere without a token resolver in the loop.
- **No layers, no `@media`, no `@container`.** Just plain rules.
- **Light-only.** There's no dark-mode flip. Mail clients handle dark mode
themselves, and variable-based theming wouldn't survive anyway.
Keep any additions to this file in the same shape: raw values, no vars, no media
queries, no layers.
## Scope
Every rule is scoped under `.email`, so the baseline never leaks onto your
website. The email generator tags each email template with
``, so the baseline applies inside emails only.
## Classes
| Class | Role |
|---|---|
| `.email` | The body baseline: system font, 16px/1.55 text, dark ink on white, comfortable page padding |
| `.email-wrap` | A centered single-column wrapper capped at 560px, so the email reads well on desktop and scales down on mobile without media queries |
| `.email-footer` | The small-print footer treatment: a top rule, smaller muted text for the sender address, unsubscribe link, and legal |
Bare `.email a`, `.email h1`/`h2`/`h3`, and `.email p` are styled too, so basic
email content looks right with no extra classes.
```html
Welcome aboard
Thanks for signing up. Here's how to get started…