# Bit.Bonboarding theme variables

Every value of the default theme is a CSS custom property on `.bit-bonboarding-root`, so the whole library is 
restyled from your own stylesheet without overriding a single selector. Load your stylesheet after 
`_content/Bit.Bonboarding/bit-bonboarding.css` so your values win:

```css
.bit-bonboarding-root { --bit-bonboarding-accent: #6d28d9; --bit-bonboarding-radius: 4px; }
.bit-bonboarding-root[data-bonboarding-theme="dark"] { --bit-bonboarding-accent: #a78bfa; }
```

The dark column applies when the resolved theme is `BonboardingTheme.Dark` (the root then carries 
`data-bonboarding-theme="dark"`); `System`, the default, keeps the light values. The variables 
with an option in the last column are written into the root's inline style for every step from that 
option, so overriding them in CSS has no effect - set the option (globally, per tour or per step) instead.

## Palette (light)

| Variable | Light (default) | Dark | Set from option |
| --- | --- | --- | --- |
| `--bit-bonboarding-surface` | `#ffffff` | `#16181d` |  |
| `--bit-bonboarding-surface-subtle` | `#f6f7f9` | `#1e2128` |  |
| `--bit-bonboarding-text` | `#14161a` | `#f2f4f7` |  |
| `--bit-bonboarding-text-muted` | `#5c6270` | `#a2aab8` |  |
| `--bit-bonboarding-border` | `#e3e6ea` | `#2a2e37` |  |
| `--bit-bonboarding-border-strong` | `#cfd4dc` | `#3a404b` |  |
| `--bit-bonboarding-accent` | `#2563eb` | `#6ea8fe` |  |
| `--bit-bonboarding-accent-hover` | `#1d4ed8` | `#8bbaff` |  |
| `--bit-bonboarding-accent-active` | `#1e40af` | `#a8ccff` |  |
| `--bit-bonboarding-accent-text` | `#ffffff` | `#0b1220` |  |
| `--bit-bonboarding-accent-soft` | `rgba(37, 99, 235, 0.12)` | `rgba(110, 168, 254, 0.16)` |  |
| `--bit-bonboarding-danger` | `#dc2626` | `#f87171` |  |
| `--bit-bonboarding-danger-hover` | `#b91c1c` | `#fca5a5` |  |
| `--bit-bonboarding-overlay` | `0, 0, 0` | same |  |
| `--bit-bonboarding-overlay-opacity` | `0.55` | `0.68` | `OverlayOpacity` |
| `--bit-bonboarding-spotlight-ring` | `rgba(255, 255, 255, 0.9)` | `rgba(255, 255, 255, 0.42)` |  |
| `--bit-bonboarding-spotlight-glow` | `rgba(37, 99, 235, 0.35)` | `rgba(110, 168, 254, 0.32)` |  |

## Shape and depth

| Variable | Light (default) | Dark | Set from option |
| --- | --- | --- | --- |
| `--bit-bonboarding-radius` | `14px` | same |  |
| `--bit-bonboarding-radius-sm` | `8px` | same |  |
| `--bit-bonboarding-radius-pill` | `999px` | same |  |
| `--bit-bonboarding-shadow` | `0 1px 2px rgba(16, 24, 40, 0.08), 0 12px 32px -8px rgba(16, 24, 40, 0.28)` | `0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px -10px rgba(0, 0, 0, 0.7)` |  |
| `--bit-bonboarding-focus-ring` | `0 0 0 2px var(--bit-bonboarding-surface), 0 0 0 4px var(--bit-bonboarding-accent)` | same |  |

## Typography

| Variable | Light (default) | Dark | Set from option |
| --- | --- | --- | --- |
| `--bit-bonboarding-font` | `system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif` | same |  |
| `--bit-bonboarding-font-size` | `0.9375rem` | same |  |
| `--bit-bonboarding-font-size-sm` | `0.8125rem` | same |  |
| `--bit-bonboarding-title-size` | `1.0625rem` | same |  |
| `--bit-bonboarding-title-weight` | `620` | same |  |
| `--bit-bonboarding-line-height` | `1.55` | same |  |

## Metrics

| Variable | Light (default) | Dark | Set from option |
| --- | --- | --- | --- |
| `--bit-bonboarding-popover-width` | `22rem` | same |  |
| `--bit-bonboarding-popover-max-height` | `min(70vh, 34rem)` | same |  |
| `--bit-bonboarding-space` | `1rem` | same |  |
| `--bit-bonboarding-arrow` | `10px` | same | `ArrowSize` |

## Motion (overridden inline when reduced motion is honoured)

| Variable | Light (default) | Dark | Set from option |
| --- | --- | --- | --- |
| `--bit-bonboarding-duration` | `220ms` | same | `AnimationDuration` |
| `--bit-bonboarding-ease` | `cubic-bezier(0.22, 0.9, 0.3, 1)` | same |  |
| `--bit-bonboarding-z` | `9000` | same | `ZIndex` |