From f1f5c760c2e5a188ad5c4f6a503bdad63a0b641f Mon Sep 17 00:00:00 2001
From: Viktor Miller <viktor.miller@vihais.com>
Date: Thu, 12 Feb 2026 23:02:55 +0900
Subject: [PATCH] feat: add 3 switchable color palettes with Slate Blue & Amber
 as default

Replace generic Google blue with 3 professional palettes (Deep Teal,
Slate Blue & Amber, Rich Olive & Copper) using CSS token overrides.
Palette B (Slate Blue + amber Next button) is the default. Includes
WP_DEBUG-only purple switcher button to cycle between palettes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 assets/css/form.css              | 139 +++++++++++++++++++++++++++++++
 includes/class-form-renderer.php |  16 +++-
 2 files changed, 154 insertions(+), 1 deletion(-)

diff --git a/assets/css/form.css b/assets/css/form.css
index 950261f..4b1b556 100644
--- a/assets/css/form.css
+++ b/assets/css/form.css
@@ -27,6 +27,123 @@
 	--umzug-transition: 0.2s ease;
 }
 
+/* ===== Color Palettes ===== */
+
+/* Palette A: Deep Teal — Grounded Confidence */
+.palette-a.umzugsliste-wizard {
+	--umzug-primary: #1F7A7A;
+	--umzug-primary-light: rgba(31, 122, 122, 0.2);
+	--umzug-primary-dark: #155858;
+	--umzug-success: #4A7C59;
+	--umzug-success-light: rgba(74, 124, 89, 0.1);
+	--umzug-error: #C14E3A;
+	--umzug-error-light: #FCEAE6;
+	--umzug-bg: #FAF8F5;
+	--umzug-surface: #FFFFFF;
+	--umzug-border: #D4CEC4;
+	--umzug-text: #3E2E28;
+	--umzug-text-secondary: #6B5D56;
+}
+
+.palette-a .room-totals {
+	background: #F5F2ED;
+}
+
+.palette-a .wizard-btn-back:hover {
+	background: #F2EFEA;
+	color: var(--umzug-text);
+}
+
+.palette-a .wizard-btn-submit:hover {
+	background: #3D6A4A;
+}
+
+body.umzugsliste-standalone:has(.palette-a) {
+	background: #FAF8F5;
+}
+
+/* Palette B: Slate Blue & Amber — Modern Logistics */
+.palette-b.umzugsliste-wizard {
+	--umzug-primary: #4A6FA5;
+	--umzug-primary-light: rgba(74, 111, 165, 0.2);
+	--umzug-primary-dark: #2F4668;
+	--umzug-success: #52A07B;
+	--umzug-success-light: rgba(82, 160, 123, 0.1);
+	--umzug-error: #D15847;
+	--umzug-error-light: #FDEAE8;
+	--umzug-bg: #F5F7FA;
+	--umzug-surface: #FFFFFF;
+	--umzug-border: #D8DFE8;
+	--umzug-text: #1A2332;
+	--umzug-text-secondary: #5F6B7A;
+}
+
+.palette-b .room-totals {
+	background: #EDF0F5;
+}
+
+.palette-b .wizard-btn-back:hover {
+	background: #ECEFF4;
+	color: var(--umzug-text);
+}
+
+.palette-b .wizard-btn-submit:hover {
+	background: #448A69;
+}
+
+.palette-b .wizard-btn-next {
+	background: #E8A63C;
+}
+
+.palette-b .wizard-btn-next:hover {
+	background: #D69529;
+}
+
+body.umzugsliste-standalone:has(.palette-b) {
+	background: #F5F7FA;
+}
+
+/* Palette C: Rich Olive & Copper — Heritage & Motion */
+.palette-c.umzugsliste-wizard {
+	--umzug-primary: #5C6E54;
+	--umzug-primary-light: rgba(92, 110, 84, 0.2);
+	--umzug-primary-dark: #3D4738;
+	--umzug-success: #6B9F6F;
+	--umzug-success-light: rgba(107, 159, 111, 0.1);
+	--umzug-error: #B85A3D;
+	--umzug-error-light: #F8EDE8;
+	--umzug-bg: #F8F6F1;
+	--umzug-surface: #FEFDFB;
+	--umzug-border: #D9D3C8;
+	--umzug-text: #2F3126;
+	--umzug-text-secondary: #6B6E64;
+}
+
+.palette-c .room-totals {
+	background: #F0EDE6;
+}
+
+.palette-c .wizard-btn-back:hover {
+	background: #F0EDE6;
+	color: var(--umzug-text);
+}
+
+.palette-c .wizard-btn-submit:hover {
+	background: #5A8A5E;
+}
+
+.palette-c .wizard-btn-next {
+	background: #C17E5D;
+}
+
+.palette-c .wizard-btn-next:hover {
+	background: #A96A4B;
+}
+
+body.umzugsliste-standalone:has(.palette-c) {
+	background: #F8F6F1;
+}
+
 /* ===== Reset & Base ===== */
 .umzugsliste-standalone {
 	margin: 0;
@@ -736,6 +853,28 @@
 	opacity: 1;
 }
 
+/* ===== Palette Switcher (WP_DEBUG) ===== */
+.dev-palette-btn {
+	position: fixed;
+	bottom: 90px;
+	right: 16px;
+	z-index: 300;
+	background: #7c3aed;
+	color: #fff;
+	border: none;
+	border-radius: 20px;
+	padding: 6px 14px;
+	font-size: 0.75rem;
+	font-weight: 600;
+	cursor: pointer;
+	opacity: 0.6;
+	transition: opacity var(--umzug-transition);
+}
+
+.dev-palette-btn:hover {
+	opacity: 1;
+}
+
 /* ===== Sonstiges ===== */
 .sonstiges-textarea {
 	width: 100%;
diff --git a/includes/class-form-renderer.php b/includes/class-form-renderer.php
index c4f43b9..5189cbe 100644
--- a/includes/class-form-renderer.php
+++ b/includes/class-form-renderer.php
@@ -46,7 +46,7 @@ class Umzugsliste_Form_Renderer {
 
 		ob_start();
 		?>
-		<div class="umzugsliste-wizard">
+		<div class="umzugsliste-wizard palette-b">
 			<?php self::render_validation_errors(); ?>
 			<?php self::render_progress_bar( $steps ); ?>
 			<div class="running-totals" id="running-totals">
@@ -82,6 +82,20 @@ class Umzugsliste_Form_Renderer {
 					<button type="submit" class="wizard-btn wizard-btn-submit" id="wizard-submit" style="display:none;"><?php echo esc_html__( 'Submit Request', 'siegel-umzugsliste' ); ?></button>
 				</div>
 			</form>
+			<?php if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) : ?>
+				<button type="button" id="dev-palette-switch" class="dev-palette-btn">&#127912; B</button>
+				<script>
+				document.getElementById('dev-palette-switch').addEventListener('click', function() {
+					var w = document.querySelector('.umzugsliste-wizard');
+					var p = ['palette-a', 'palette-b', 'palette-c'];
+					var c = p.findIndex(function(x) { return w.classList.contains(x); });
+					var n = (c + 1) % p.length;
+					w.classList.remove(p[c]);
+					w.classList.add(p[n]);
+					this.textContent = '\u{1F3A8} ' + p[n].split('-')[1].toUpperCase();
+				});
+				</script>
+			<?php endif; ?>
 		</div>
 		<?php
 		return ob_get_clean();