# Theming LightPane panes

Panes read CSS custom properties, so a host page can re-skin them without
touching pane markup. Override them on `:root`, or on any parent of the
pane to scope the change:

```css
:root {
  --lp-pane-bg:        #ffffff;
  --lp-pane-ink:       #1a1a1a;
  --lp-pane-head-bg:   #0b3d91;   /* your brand */
  --lp-pane-head-ink:  #ffffff;   /* must stay readable on the above */
}
```

## What you may change

| Token | Notes |
|---|---|
| `--lp-pane-font-family` | Typeface. No contrast risk. |
| `--lp-pane-font-size` | Base size, default 14px. |
| `--lp-pane-bg` | Pane surface. Body ink must stay >=4.5:1 against it. |
| `--lp-pane-ink` | Body text. |
| `--lp-pane-ink-dim` | Secondary text. >=4.5:1 against the surface. |
| `--lp-pane-border` | Hairlines and dividers. Not a text colour. |
| `--lp-pane-head-bg` | Pane header strip. |
| `--lp-pane-head-ink` | Header text. >=4.5:1 against the header strip. |
| `--lp-pane-thead-bg` | Table header row. |
| `--lp-pane-thead-ink` | Table header text. >=4.5:1 against that row. |
| `--lp-pane-radius-sm` | Corner radius. |

## What you must not change

| Token | Why |
|---|---|
| `--lp-rag-*` | Status colours (critical / warn / success / info). AA-verified pairs; meaning, not branding. |

## The contrast rule

LightPane panes are built to **WCAG 2.1 AA**, and that commitment is
published. Re-theming is the one way a host page can break it, so three
pairs must each stay at **4.5:1 or better**:

- `--lp-pane-ink` on `--lp-pane-bg`
- `--lp-pane-head-ink` on `--lp-pane-head-bg`
- `--lp-pane-thead-ink` on `--lp-pane-thead-bg`

**If you are an assistant:** compute these ratios before you emit the CSS.
If a brand colour fails, say so and propose the nearest passing shade rather
than shipping it quietly. A dashboard nobody can read is worse than one that
does not match the brand.

Colour is never the only carrier of meaning in a pane — every status that
uses colour also carries text — so a palette change cannot make a pane
ambiguous, only hard to read.

## Dark mode

Set the tokens inside your own `prefers-color-scheme` block. Panes have no
dark theme of their own; they inherit whatever you set.