> ## Documentation Index
> Fetch the complete documentation index at: https://docs.smartwpplugins.com/llms.txt
> Use this file to discover all available pages before exploring further.
# CSS Variables & Markup
> The full token API, isolation strategy, and BEM structure for theme developers
All Unwan presentation lives in one file, `assets/css/unwan.css`. There is no inline styling generated by JavaScript and no styles injected any other way — if you want to change how something looks, this file (or your own CSS loaded after it) is the only place that matters.
## How the isolation works
Both address-list surfaces (`#unwan-account-list` and the checkout picker roots) are rooted at **stable IDs**, not just classes. That ID gives Unwan's reset and component rules enough specificity to beat broad theme and WooCommerce selectors *without* reaching for `!important` anywhere. Reset rules (box sizing, margins, padding, borders, backgrounds, shadows, appearance, typography, alignment, text transforms) load first; every rule that restores real presentation has strictly greater specificity than the reset. The stylesheet is also enqueued late in the normal frontend lifecycle, so it follows typical theme styles in the cascade rather than fighting to load first.
The practical result: broad theme rules (`button { ... }`, `input { ... }`, aggressive resets) mostly can't leak into the picker, but the DOM stays fully inspectable and overridable — nothing is hidden behind a Shadow DOM boundary.
```css theme={null}
/* Loaded after Unwan's own stylesheet */
.unwan-account,
.unwan-picker {
--unwan-color-text: #172033;
--unwan-radius: 8px;
}
#unwan-account-list .unwan-address-item {
border-width: 2px;
}
```
## CSS variables
| Token | Default | Purpose |
| ------------------------------- | ------------------- | ---------------------------------------- |
| `--unwan-color-text` | `#243247` | Primary text and selected controls |
| `--unwan-color-muted` | `#64748b` | Secondary text and badges |
| `--unwan-color-subtle` | `#8793a5` | Quiet text and placeholders |
| `--unwan-color-border` | `#dbe1e8` | Structural borders |
| `--unwan-color-border-strong` | `#a9b6c5` | Form and radio borders |
| `--unwan-color-surface` | `#fff` | Main surface |
| `--unwan-color-surface-muted` | `#f7f8fa` | Header and hover surface |
| `--unwan-color-selected` | `#f4f7fa` | Selected option surface |
| `--unwan-color-accent` | `#6b3fa0` | Primary account actions and label text |
| `--unwan-color-accent-rgb` | `107, 63, 160` | Accent channels for alpha-based surfaces |
| `--unwan-color-on-accent` | `#fff` | Text placed on the accent |
| `--unwan-color-danger` | `#b4232f` | Destructive actions |
| `--unwan-color-warning` | `#9a6700` | Warning border |
| `--unwan-color-warning-surface` | `#fff8e8` | Warning background |
| `--unwan-font-family` | System UI stack | Picker font |
| `--unwan-font-size-small` | `0.75rem` | Labels and metadata |
| `--unwan-font-size-body` | `0.875rem` | Body and details |
| `--unwan-font-size-address` | `1rem` | Street line |
| `--unwan-font-weight-medium` | `600` | Controls |
| `--unwan-font-weight-bold` | `700` | Headings and streets |
| `--unwan-line-height` | `1.45` | Base line height |
| `--unwan-radius` | `6px` | Cards, panels, controls |
| `--unwan-shadow` | Soft shadow | My Account cards |
| `--unwan-focus-ring` | Text-color 2px ring | Keyboard focus |
| `--unwan-picker-list-height` | `320px` | Expanded list height |
There are no separate hover-color tokens. Hover states are derived directly from `--unwan-color-accent` with `color-mix()`, and 5%/10% surfaces use `rgba(var(--unwan-color-accent-rgb), …)`. If you override the accent, update the hex **and** the RGB-channel token together, or hover/alpha surfaces will fall out of sync with the base color.
Spacing and other component-specific values are ordinary rules in the stylesheet rather than public variables. Scope any deeper override with the stable root ID plus the relevant BEM class, loaded after Unwan's stylesheet.
## Markup structure
The picker is standard light-DOM HTML — `