feat: hero variants, block colors, theme preview tab, CSS var sync on upgrade

- Add .hero#primary / .hero#secondary CSS variant system to template.css
- Add :nth-child() block color palette for top-a/b, bottom-a/b positions
- Add named per-module overrides (#block-highlight, #block-cta, #block-alert)
- Add all hero + block CSS variables to light/dark custom palette templates
- Add theme-test.html with full visual CSS variable reference + color test
- Add "Theme Preview" tab to admin config with embedded iframe of test sheet
- Add script.php install/update script (Joomla 5/6 compatible)
- Add sync_custom_vars.php — detects missing vars in user palettes on upgrade
- Add en-GB and en-US language strings for new admin config fields
- Update CSS_VARIABLES.md and CHANGELOG.md
- Bump version to 03.09.02

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/language/en-GB/tpl_mokocassiopeia.ini

@@ -238,6 +238,11 @@ TPL_MOKOCASSIOPEIA_CSS_VARS_VM_DESC="<strong>Surfaces &amp; text</strong><br><co
 TPL_MOKOCASSIOPEIA_CSS_VARS_GABLE_LABEL="Gable"
 TPL_MOKOCASSIOPEIA_CSS_VARS_GABLE_DESC="Colour tokens used by the Gable extension.<br><code>--gab-blue</code> — <code>#0066cc</code><br><code>--gab-green</code> — <code>#28a745</code><br><code>--gab-red</code> — <code>#dc3545</code><br><code>--gab-orange</code> — <code>#fd7e14</code><br><code>--gab-gray1</code> — <code>#495057</code><br><code>--gab-gray2</code> — <code>#6c757d</code><br><code>--gab-gray3</code> — <code>#adb5bd</code>"
 
+; ===== Theme Preview tab =====
+TPL_MOKOCASSIOPEIA_THEME_PREVIEW_FIELDSET_LABEL="Theme Preview"
+TPL_MOKOCASSIOPEIA_THEME_PREVIEW_INTRO="<p>Live preview of all CSS variables, hero variants, block colours, and Bootstrap components rendered with your active theme. Use the <strong>Toggle Light / Dark</strong> button inside the preview to switch modes. This page is also available as a standalone file at <code>templates/mokocassiopeia/templates/theme-test.html</code>.</p>"
+TPL_MOKOCASSIOPEIA_THEME_PREVIEW_FRAME="<iframe src='../templates/mokocassiopeia/templates/theme-test.html' style='width:100%;height:80vh;border:1px solid #dee2e6;border-radius:.375rem;' loading='lazy' title='Theme test sheet preview'></iframe>"
+
 ; ===== Misc =====
 MOD_BREADCRUMBS_HERE="YOU ARE HERE:"
 

src/language/en-US/tpl_mokocassiopeia.ini

@@ -148,6 +148,12 @@ TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_DESC="<strong>Named colors</strong><br><code>
 TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_LABEL="Hero / Banner Overlay"
 TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_DESC="Applied to the <code>.custom-hero</code> / <code>.banner-overlay</code> layout. Set on <code>:root[data-bs-theme]</code> so light and dark values are independent.<br><code>--hero-height</code> — Banner height (default: <code>70vh</code>)<br><code>--hero-color</code> — Base text color<br><code>--hero-bg-repeat</code> — Background repeat (default: <code>no-repeat</code>)<br><code>--hero-bg-attachment</code> — Background attachment (default: <code>fixed</code>)<br><code>--hero-bg-position</code> — Background position (default: <code>top center</code>)<br><code>--hero-bg-size</code> — Background size (default: <code>cover</code>)<br><code>--hero-border-bottom</code> — Bottom border (default: <code>solid var(--accent-color-secondary)</code>)<br><code>--hero-overlay-bg</code> — Overlay tint color (light default: <code>hsla(0,0%,0%,0.1)</code> / dark default: <code>hsla(0,0%,0%,0.3)</code>)<br><code>--hero-overlay-padding</code> — Overlay inner padding (default: <code>1em</code>)<br><code>--hero-overlay-text-align</code> — Overlay text alignment (default: <code>center</code>)<br><code>--hero-overlay-text-color</code> — Overlay text color"
 
+TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_VARIANTS_LABEL="Hero Variants (.hero#primary / .hero#secondary)"
+TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_VARIANTS_DESC="Two-variant hero system using <code>.hero#primary</code> and <code>.hero#secondary</code>. Each variant resolves its own CSS variable set per theme.<br><br><strong>Primary variant</strong> — homepage, main landing pages (sky blue tint, softer overlay)<br><code>--hero-primary-bg-color</code> — Fallback background color<br><code>--hero-primary-overlay</code> — Gradient overlay tint<br><code>--hero-primary-color</code> — Text color<br><br><strong>Secondary variant</strong> — inner pages, events, about (navy overlay, lighter text)<br><code>--hero-secondary-bg-color</code> — Fallback background color<br><code>--hero-secondary-overlay</code> — Gradient overlay tint<br><code>--hero-secondary-color</code> — Text color<br><br><strong>HTML usage:</strong><br><code>&lt;div class=&quot;hero&quot; id=&quot;primary&quot; style=&quot;background-image:url(...)&quot;&gt;</code>"
+
+TPL_MOKOCASSIOPEIA_CSS_VARS_BLOCK_COLORS_LABEL="Block Color System (top-a / top-b / bottom-a / bottom-b)"
+TPL_MOKOCASSIOPEIA_CSS_VARS_BLOCK_COLORS_DESC="Automatic brand color palette for modules in <code>top-a</code>, <code>top-b</code>, <code>bottom-a</code>, and <code>bottom-b</code> positions. Colors assigned by <code>:nth-child()</code> order — no classes needed.<br><br><strong>Slot palette</strong><br><code>--block-color-1</code> / <code>--block-text-1</code> — 1st module<br><code>--block-color-2</code> / <code>--block-text-2</code> — 2nd module<br><code>--block-color-3</code> / <code>--block-text-3</code> — 3rd module<br><code>--block-color-4</code> / <code>--block-text-4</code> — 4th module<br><br><strong>Named overrides</strong> (add an ID to the module HTML to bypass slot color)<br><code>--block-highlight-bg</code> / <code>--block-highlight-text</code> — for <code>#block-highlight</code><br><code>--block-cta-bg</code> / <code>--block-cta-text</code> — for <code>#block-cta</code><br><code>--block-alert-bg</code> / <code>--block-alert-text</code> — for <code>#block-alert</code><br><br><strong>Priority:</strong> Named ID &gt; Slot color. No <code>!important</code> needed — specificity handles it."
+
 TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_LABEL="Header Background"
 TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_DESC="Controls the background of the topbar/header area.<br><code>--header-background-image</code> — CSS <code>background-image</code> value (default: built-in SVG pattern)<br><code>--header-background-attachment</code> — <code>fixed</code> or <code>scroll</code><br><code>--header-background-repeat</code> — e.g. <code>repeat</code>, <code>no-repeat</code><br><code>--header-background-size</code> — e.g. <code>auto</code>, <code>cover</code>, <code>contain</code>"
 
@@ -232,6 +238,11 @@ TPL_MOKOCASSIOPEIA_CSS_VARS_VM_DESC="<strong>Surfaces &amp; text</strong><br><co
 TPL_MOKOCASSIOPEIA_CSS_VARS_GABLE_LABEL="Gable"
 TPL_MOKOCASSIOPEIA_CSS_VARS_GABLE_DESC="Color tokens used by the Gable extension.<br><code>--gab-blue</code> — <code>#0066cc</code><br><code>--gab-green</code> — <code>#28a745</code><br><code>--gab-red</code> — <code>#dc3545</code><br><code>--gab-orange</code> — <code>#fd7e14</code><br><code>--gab-gray1</code> — <code>#495057</code><br><code>--gab-gray2</code> — <code>#6c757d</code><br><code>--gab-gray3</code> — <code>#adb5bd</code>"
 
+; ===== Theme Preview tab =====
+TPL_MOKOCASSIOPEIA_THEME_PREVIEW_FIELDSET_LABEL="Theme Preview"
+TPL_MOKOCASSIOPEIA_THEME_PREVIEW_INTRO="<p>Live preview of all CSS variables, hero variants, block colors, and Bootstrap components rendered with your active theme. Use the <strong>Toggle Light / Dark</strong> button inside the preview to switch modes. This page is also available as a standalone file at <code>templates/mokocassiopeia/templates/theme-test.html</code>.</p>"
+TPL_MOKOCASSIOPEIA_THEME_PREVIEW_FRAME="<iframe src='../templates/mokocassiopeia/templates/theme-test.html' style='width:100%;height:80vh;border:1px solid #dee2e6;border-radius:.375rem;' loading='lazy' title='Theme test sheet preview'></iframe>"
+
 ; ===== Misc =====
 MOD_BREADCRUMBS_HERE="YOU ARE HERE:"