docs: remove incorrect Rule 12 (variant-only-CSS-vars) from ve-architecture and playbook

Agent-Logs-Url: https://github.com/arijs/bootswatch-solid/sessions/2f41605d-c98d-43bd-8c3e-7f88ee551126

Co-authored-by: rhengles <8967+rhengles@users.noreply.github.com>

Author: Copilot

docs/ve-architecture.md

@@ -216,7 +216,6 @@ ve-project2/src/
 9. **`ThemedBody` (or equivalent) must wrap any region that requires body-level theme styles** (font, color, background).
 10. **Global `--bs-*` var values in `scope.css.ts` must be sourced from `screenshots/{theme}/theme.css`.** The `:root` block in that file is the authoritative source for each theme's resolved CSS custom-property values (e.g. `--bs-primary`, `--bs-border-radius`, `--bs-link-color`, etc.). Never copy Bootstrap's default values for a Bootswatch theme — look up the theme's own overrides in `screenshots/{theme}/theme.css`.
 11. **CSS custom-property references must be preserved as references, not resolved to static values.** If the Bootstrap source CSS writes `var(--bs-border-radius)`, the VE2 output must write `varBsBorderRadius` (the matching `createVar()` identifier), not the final resolved value (e.g. `'0.375rem'`). This ensures per-theme values propagate correctly at runtime.
-12. **Component variant styles must set only CSS vars.** The base component class (e.g. `.btn`) owns all layout and interaction rules that reference those vars. Variant classes (e.g. `.btn-primary`, `.btn-outline-secondary`) only override CSS custom properties via `vars:` — never set `color`, `backgroundColor`, `borderColor`, etc. directly on a variant rule. This mirrors Bootstrap's own source structure exactly.
 
 ---
 

docs/ve2-migration-playbook.md

@@ -269,7 +269,6 @@ The `converted=` number should increase by exactly the count of routes you added
 | Utility classes must be absorbed into contract classes | The original HTML uses Bootstrap utility classes directly (`bg-primary`, `text-dark`, `rounded-pill`, etc.). In VE2 these have no effect — absorb their values into the appropriate contract variant class (e.g. `badgePrimary` encodes both background-color and the default white text; `badgeWarning` overrides `color` to `#000`; `badgeRoundedPill` sets the pill `border-radius`). |
 | Scope `vars:` values must come from `screenshots/{theme}/theme.css` | When populating `scope.css.ts` with global `--bs-*` values (colours, radii, link colours, etc.), always read the resolved values from the `:root` block in `screenshots/{theme}/theme.css`. Never copy Bootstrap's default values for a Bootswatch theme — the theme overrides many of them. E.g. Sketchy sets `--bs-primary: #333` (not `#0d6efd`) and `--bs-link-color: #333` (not `#0d6efd`). |
 | CSS var references must stay as var references | If Bootstrap's source CSS writes `var(--bs-border-radius)`, the VE2 output must use `varBsBorderRadius` (the matching `createVar()` identifier), **not** the resolved static value (e.g. `'0.375rem'`). Resolving to a static value breaks per-theme inheritance — the whole point of the CSS custom-property cascade is that each theme sets the global var to its own value. |
-| Variant rules must only set CSS vars | Component variant classes (e.g. `.btn-primary`, `.btn-outline-danger`) must only override CSS custom properties via `vars:`. They must **not** directly set layout or colour properties (`color`, `backgroundColor`, `borderColor`, etc.). The base component class (e.g. `.btn`) owns those property declarations and references the vars — this mirrors Bootstrap's source structure exactly and ensures all interaction states (hover, active, disabled) work correctly through the shared rules on the base class. |
 | `@screenshot` annotations — use the original's full list | The original source file (`src/components/…`) contains per-theme height overrides (e.g. `// @screenshot sketchy: 360x303 303`). Copy those annotations verbatim into the VE2 component so the screenshot harness captures the correct crop size per theme. Omitting them causes the wildcard `*` fallback to be used for all themes, which may cut off content in themes with larger spacing. |
 | `<p class="h1">` vs actual `<h1>` | The original uses Bootstrap typography utility classes (`.h1`–`.h6` on `<p>`) to mimic heading sizes. VE2 components should use real `<h1>`–`<h6>` elements instead — the browser's default UA stylesheet provides the same relative sizing without needing extra contract classes. |