Add CSS Variables reference tab to template options

Adds a new 'CSS Variables' tab to the template configuration with eight
documented sections (brand, typography, navigation, header background,
container backgrounds, borders/shadows, forms/focus) so site builders
can reference all available custom properties without leaving Joomla admin.

Also removes external docs links from descriptions in templateDetails.xml
and both language files, replacing them with a pointer to the new tab.
Fixes stale custom palette source paths in en-GB and en-US ini files.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/language/en-GB/tpl_mokocassiopeia.ini

@@ -8,7 +8,7 @@
 ; DEFGROUP: Joomla.Template.Site
 ; INGROUP: MokoCassiopeia
 ; PATH: ./language/en-GB/tpl_mokocassiopeia.ini
-; VERSION: 03.06.02
+; VERSION: 03.09.01
 ; BRIEF: English (GB) language strings for the MokoCassiopeia Joomla template
 ;
 ; Note: Template metadata strings (name, description) are in tpl_mokocassiopeia.sys.ini
@@ -75,9 +75,9 @@ TPL_MOKOCASSIOPEIA_COLOR_NAME_STANDARD="Standard"
 TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom"
 ; New labels for Theme tab dropdowns
 TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light colour palette"
-TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a colour palette for light mode. <strong>Standard</strong> uses the default blue theme with comprehensive styling for all components. <strong>Custom</strong> allows you to create your own colour scheme - copy the template file from <code>templates/theme_custom_light.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code> and customise the CSS variables to match your brand."
+TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a colour palette for light mode. <strong>Standard</strong> uses the default blue theme with comprehensive styling for all components. <strong>Custom</strong> loads <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code> — copy the starter file from <code>templates/mokocassiopeia/templates/light.custom.css</code> and customise the CSS variables to match your brand."
 TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_LABEL="Dark colour palette"
-TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_DESC="Select a colour palette for dark mode. <strong>Standard</strong> uses the default blue theme optimised for dark backgrounds with proper contrast. <strong>Custom</strong> allows you to create your own colour scheme - copy the template file from <code>templates/theme_custom_dark.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code> and customise the CSS variables to match your brand."
+TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_DESC="Select a colour palette for dark mode. <strong>Standard</strong> uses the default blue theme optimised for dark backgrounds with proper contrast. <strong>Custom</strong> loads <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code> — copy the starter file from <code>templates/mokocassiopeia/templates/dark.custom.css</code> and customise the CSS variables to match your brand."
 
 ; ===== Theme tab (core feature strings) =====
 TPL_MOKO_THEME_FIELDSET="Theme"
@@ -109,6 +109,24 @@ TPL_MOKO_THEME_FAB_ENABLED_DESC="Display a persistent, accessible theme toggle."
 TPL_MOKO_THEME_FAB_POS="Floating switch position"
 TPL_MOKO_THEME_FAB_POS_DESC="Screen corner for the toggle."
 
+; ===== CSS Variables tab =====
+TPL_MOKOCASSIOPEIA_CSS_VARS_FIELDSET_LABEL="CSS Variables"
+TPL_MOKOCASSIOPEIA_CSS_VARS_INTRO="<p>All colours, spacing and layout values are driven by CSS custom properties. To override any variable without editing the template, add your overrides to <code>media/templates/site/mokocassiopeia/css/user.css</code>, or create a custom palette file (see the Theme tab). Variables are scoped to <code>:root[data-bs-theme=&quot;light&quot;]</code> or <code>:root[data-bs-theme=&quot;dark&quot;]</code> so light and dark values are independent.</p>"
+TPL_MOKOCASSIOPEIA_CSS_VARS_BRAND_LABEL="Brand &amp; Bootstrap Palette"
+TPL_MOKOCASSIOPEIA_CSS_VARS_BRAND_DESC="<strong>Brand</strong><br><code>--color-primary</code> — Primary brand colour (default: <code>#112855</code>)<br><code>--accent-color-primary</code> — Primary accent (default: <code>#3f8ff0</code>)<br><code>--accent-color-secondary</code> — Secondary accent<br><br><strong>Bootstrap Semantic Colours</strong><br>Map to buttons, alerts, badges and other components.<br><code>--primary</code>, <code>--secondary</code>, <code>--success</code>, <code>--info</code>, <code>--warning</code>, <code>--danger</code>, <code>--light</code>, <code>--dark</code>"
+TPL_MOKOCASSIOPEIA_CSS_VARS_TYPO_LABEL="Typography &amp; Body"
+TPL_MOKOCASSIOPEIA_CSS_VARS_TYPO_DESC="<code>--body-color</code> — Default text colour<br><code>--body-bg</code> — Page background<br><code>--body-font-family</code> — Font stack<br><code>--body-font-size</code> — Base size (default: <code>1rem</code>)<br><code>--body-line-height</code> — Line height (default: <code>1.5</code>)<br><code>--heading-color</code> — Heading colour (default: inherit)<br><code>--link-color</code> — Hyperlink colour<br><code>--link-hover-color</code> — Hyperlink hover colour<br><code>--code-color</code> — Inline code colour<br><code>--muted-color</code> — Muted/secondary text colour"
+TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_LABEL="Navigation"
+TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_DESC="<code>--nav-bg-color</code> — Navbar background colour<br><code>--nav-text-color</code> — Navbar text colour<br><code>--mainmenu-nav-link-color</code> — Active nav link colour<br><code>--navbar-padding-x</code> / <code>--navbar-padding-y</code> — Navbar padding<br><code>--nav-link-padding-x</code> / <code>--nav-link-padding-y</code> — Link padding"
+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>"
+TPL_MOKOCASSIOPEIA_CSS_VARS_CONTAINERS_LABEL="Container Backgrounds"
+TPL_MOKOCASSIOPEIA_CSS_VARS_CONTAINERS_DESC="Each layout container has its own background variables. Replace <code>{pos}</code> with: <code>below-topbar</code>, <code>top-a</code>, <code>top-b</code>, <code>sidebar</code>, <code>bottom-a</code>, or <code>bottom-b</code>.<br><br><code>--container-{pos}-bg-image</code> — Background image (default: <code>none</code>)<br><code>--container-{pos}-bg-color</code> — Background colour (default: <code>transparent</code>)<br><code>--container-{pos}-bg-position</code> — Background position<br><code>--container-{pos}-bg-attachment</code> — <code>fixed</code> or <code>scroll</code><br><code>--container-{pos}-bg-repeat</code> — Repeat behaviour<br><code>--container-{pos}-bg-size</code> — e.g. <code>cover</code>, <code>auto</code><br><code>--container-{pos}-border</code> — Border shorthand<br><code>--container-{pos}-border-radius</code> — Border radius"
+TPL_MOKOCASSIOPEIA_CSS_VARS_BORDERS_LABEL="Borders &amp; Shadows"
+TPL_MOKOCASSIOPEIA_CSS_VARS_BORDERS_DESC="<strong>Borders</strong><br><code>--border-color</code> — Default border colour<br><code>--border-width</code> — Default width (default: <code>1px</code>)<br><code>--border-radius</code> — Default radius (default: <code>.25rem</code>)<br><code>--border-radius-sm</code>, <code>--border-radius-lg</code>, <code>--border-radius-xl</code>, <code>--border-radius-pill</code><br><br><strong>Shadows</strong><br><code>--box-shadow</code> — Standard shadow<br><code>--box-shadow-sm</code> — Subtle shadow<br><code>--box-shadow-lg</code> — Prominent shadow<br><code>--box-shadow-inset</code> — Inset shadow"
+TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_LABEL="Forms &amp; Focus"
+TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_DESC="<code>--input-color</code> — Input text colour<br><code>--input-bg</code> — Input background<br><code>--input-border-color</code> — Input border colour<br><code>--input-focus-border-color</code> — Focused border colour<br><code>--input-focus-box-shadow</code> — Focused input shadow<br><code>--input-placeholder-color</code> — Placeholder text colour<br><code>--input-disabled-bg</code> — Disabled input background<br><br><code>--focus-ring-color</code> — Keyboard focus ring colour<br><code>--focus-ring-width</code> — Focus ring width<br><code>--form-valid-color</code> / <code>--form-invalid-color</code> — Validation state colours"
+
 ; ===== Misc =====
 MOD_BREADCRUMBS_HERE="YOU ARE HERE:"