Bugzilla

Figma spec: https://www.figma.com/design/O5gPSsJAkI5fxiRxReO8El/Built-in-VPN-Firefox-152?node-id=15150-14095&m=dev

This ticket concerns the background-color for the following states in i[pprotection-status-box](https://searchfox.org/firefox-main/rev/7c07e6f277dd6d5122183d6feecb7473277ab5bb/browser/components/ipprotection/content/ipprotection-status-box.css):
- paused
- connecting
- generic-error
- network-error
- catastrophic-error

We have the background color set to `--background-color-box-info` (disconnected, connected, connecting, paused, generic-error), `--background-color-information` (network-error), or `background-color-critical` (catastrophic-error).

### background-color-box-info
This is the current value several states mentioned above. The issue with this token is that it's darker than what's in our spec. Furthermore, this causes bad contrast with our loading skeleton (see Bug 2044431). I propose we replace the panel background color with a `light-dark` rule that falls back to either `--color-gray-05` or `--color-black-alpha-50`. 

1. To reduce conflicts and scope of changes, we can limit all rule updates to the nova pref == true.
2. Because the gray is lighter relative to the panel in light mode, I think it'd be best to change our border for `#content-container`  from `--card-border-color` to `--border-color` when nova is enabled
2. I also suggest we use custom named tokens in `ipprotection-status-box.css`. Example:
```
:host {
  --not-connected-panel-background-color: var(--background-color-box-info);
  --panel-border-color: var(--card-border-color);
  --nova-not-connected-panel-background-color: light-dark(var(--color-gray-05), var(--color-black-alpha-50));
}

/* Then, use the appropriate tokens for nova and non nova rules */

/* Updating the background color can be simplified to this with nova == true /*
  .disconnected,
  .generic-error,
  .network-error,
  .catastrophic-error,
  .paused,
  .connecting {
    background-color: var(--nova-not-connected-panel-background-color);
  }
```

Figma spec: https://www.figma.com/design/O5gPSsJAkI5fxiRxReO8El/Built-in-VPN-Firefox-152?node-id=15150-14095&m=dev

This ticket concerns the background-color for the following states in i[pprotection-status-box](https://searchfox.org/firefox-main/rev/7c07e6f277dd6d5122183d6feecb7473277ab5bb/browser/components/ipprotection/content/ipprotection-status-box.css):
- disconnected
- paused
- connecting
- generic-error
- network-error
- catastrophic-error

We have the background color set to `--background-color-box-info` (disconnected, connected, connecting, paused, generic-error), `--background-color-information` (network-error), or `background-color-critical` (catastrophic-error).

### background-color-box-info
This is the current value several states mentioned above. The issue with this token is that it's darker than what's in our spec. Furthermore, this causes bad contrast with our loading skeleton (see Bug 2044431). I propose we replace the panel background color with a `light-dark` rule that falls back to either `--color-gray-05` or `--color-black-alpha-50`. 

1. To reduce conflicts and scope of changes, we can limit all rule updates to the nova pref == true.
2. Because the gray is lighter relative to the panel in light mode, I think it'd be best to change our border for `#content-container`  from `--card-border-color` to `--border-color` when nova is enabled
2. I also suggest we use custom named tokens in `ipprotection-status-box.css`. Example:
```
:host {
  --not-connected-panel-background-color: var(--background-color-box-info);
  --panel-border-color: var(--card-border-color);
  --nova-not-connected-panel-background-color: light-dark(var(--color-gray-05), var(--color-black-alpha-50));
}

/* Then, use the appropriate tokens for nova and non nova rules */

/* Updating the background color can be simplified to this with nova == true /*
  .disconnected,
  .generic-error,
  .network-error,
  .catastrophic-error,
  .paused,
  .connecting {
    background-color: var(--nova-not-connected-panel-background-color);
  }
```