From c5641a83646dceaf2c9b4691d71b40bfbf575056 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Sun, 29 Mar 2026 22:22:23 +0200
Subject: [PATCH] fix: revert primary and section colors back to original
 lilac/purple
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The impl-feature pipeline changed the default color scheme from
lilac/purple (#5e4b8b, #9163b8) to pink (#c9507a, #d95a8a).
This was unintentional — lilac was the chosen brand color.

Reverted: primary, section defaults, bg tints, success colors,
gradients, nav highlights, and all hardcoded rgba values back to
the original purple palette.
---
 src/main.css | 92 ++++++++++++++++++++++++++--------------------------
 1 file changed, 46 insertions(+), 46 deletions(-)

diff --git a/src/main.css b/src/main.css
index 736d8b2..ff860ae 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1,15 +1,15 @@
 /* ================= BASE THEME ================= */
 :root {
 	/* Primary colors */
-	--primary-color: #c9507a;
-	--primary-light: #e077a0;
-	--primary-dark: #a83d65;
+	--primary-color: #5e4b8b;
+	--primary-light: #8a77b5;
+	--primary-dark: #724a95;
 
-	/* Section colors (default to CSS pink) */
-	--section-color: #d95a8a;
-	--section-color-light: #e87da6;
-	--section-color-dark: #b84472;
-	--section-color-rgb: 217, 90, 138;
+	/* Section colors (default to CSS purple) */
+	--section-color: #9163b8;
+	--section-color-light: #a87dc8;
+	--section-color-dark: #724a95;
+	--section-color-rgb: 145, 99, 184;
 
 	/* Secondary colors */
 	--secondary-color: #444444;
@@ -23,9 +23,9 @@
 	--white-text: #ffffff;
 
 	/* Background colors */
-	--bg-color: #fcf7f9;
+	--bg-color: #f8f7fc;
 	--panel-bg: #ffffff;
-	--code-bg: #faf5f7;
+	--code-bg: #f7f5fa;
 	--editor-bg: #1e1e1e;
 	--editor-highlight: #303030;
 
@@ -34,9 +34,9 @@
 
 	/* Status colors */
 	--info-color: #7a93fe;
-	--success-color: #d46d9b;
-	--success-color-dark: #b84472;
-	--success-color-light: #e8b8d0;
+	--success-color: #9b6dd4;
+	--success-color-dark: #7c4dff;
+	--success-color-light: #c9b8e8;
 	--error-color: #cb6e75;
 	--danger-color: #dc3545;
 
@@ -252,11 +252,11 @@ kbd {
 }
 
 .logo h1 .code-text {
-	color: #d95a8a;
+	color: #9163b8;
 }
 
 .logo h1 .crispies-text {
-	background: #d95a8a;
+	background: #9163b8;
 	color: white;
 	padding: 0.15rem 0.35rem;
 	border-radius: 4px;
@@ -476,7 +476,7 @@ kbd {
 .completion-badge {
 	display: inline-block;
 	padding: 0.15rem 0.5rem;
-	background: linear-gradient(135deg, #d95a8a, #d45aa0, #1aafb8, #ff4d88);
+	background: linear-gradient(135deg, #9163b8, #d45aa0, #1aafb8, #7c4dff);
 	color: white;
 	font-size: 0.7rem;
 	font-weight: 600;
@@ -722,7 +722,7 @@ kbd {
 	position: absolute;
 	inset: var(--spacing-md);
 	border-radius: var(--border-radius-md);
-	background: conic-gradient(from var(--border-angle), #d95a8a, #d45aa0, #1aafb8, #ff4d88, #d95a8a);
+	background: conic-gradient(from var(--border-angle), #9163b8, #d45aa0, #1aafb8, #7c4dff, #9163b8);
 	filter: blur(30px);
 	opacity: 0;
 	animation: spin-glow 3s ease-out forwards;
@@ -735,7 +735,7 @@ kbd {
 	position: absolute;
 	inset: var(--spacing-md);
 	border-radius: var(--border-radius-md);
-	background: conic-gradient(from 0deg, #d95a8a, #d45aa0, #1aafb8, #ff4d88, #d95a8a);
+	background: conic-gradient(from 0deg, #9163b8, #d45aa0, #1aafb8, #7c4dff, #9163b8);
 	filter: blur(30px);
 	opacity: 0.35;
 	pointer-events: none;
@@ -824,7 +824,7 @@ kbd {
 	border: 6px solid transparent;
 	background:
 		linear-gradient(var(--panel-bg), var(--panel-bg)) padding-box,
-		conic-gradient(from 0deg, #d95a8a, #d45aa0, #1aafb8, #ff4d88, #d95a8a) border-box;
+		conic-gradient(from 0deg, #9163b8, #d45aa0, #1aafb8, #7c4dff, #9163b8) border-box;
 }
 
 .preview-wrapper.matched {
@@ -832,7 +832,7 @@ kbd {
 	border: 6px solid transparent;
 	background:
 		linear-gradient(var(--panel-bg), var(--panel-bg)) padding-box,
-		conic-gradient(from var(--border-angle), #d95a8a, #d45aa0, #1aafb8, #ff4d88, #d95a8a) border-box;
+		conic-gradient(from var(--border-angle), #9163b8, #d45aa0, #1aafb8, #7c4dff, #9163b8) border-box;
 	animation: spin-border 3s ease-out forwards;
 	overflow: visible;
 }
@@ -852,7 +852,7 @@ kbd {
 	font-weight: 800;
 	letter-spacing: 0.05em;
 	color: white;
-	background: linear-gradient(135deg, #d95a8a 0%, #d45aa0 50%, #ff4d88 100%);
+	background: linear-gradient(135deg, #9163b8 0%, #d45aa0 50%, #7c4dff 100%);
 	padding: 1.25rem 2rem 1.75rem;
 	z-index: 10;
 	pointer-events: none;
@@ -1150,7 +1150,7 @@ nav.sidebar-section:not(.sidebar-nav-mobile) {
 
 .progress-fill {
 	height: 100%;
-	background: linear-gradient(90deg, #d95a8a, #d45aa0, #1aafb8, #ff4d88);
+	background: linear-gradient(90deg, #9163b8, #d45aa0, #1aafb8, #7c4dff);
 	background-size: calc(100% * 100 / var(--progress-percent, 100)) 100%;
 	border-radius: 4px;
 	transition: width 0.3s ease;
@@ -1214,7 +1214,7 @@ nav.sidebar-section:not(.sidebar-nav-mobile) {
 }
 
 /* Each milestone gets a color evenly distributed across the gradient
-   Gradient: #d95a8a (0%) → #d45aa0 (33%) → #1aafb8 (67%) → #ff4d88 (100%) */
+   Gradient: #9163b8 (0%) → #d45aa0 (33%) → #1aafb8 (67%) → #7c4dff (100%) */
 .milestone.reached:nth-child(1) { background: #a55eac; } /* ~14% */
 .milestone.reached:nth-child(2) { background: #c459a2; } /* ~28% */
 .milestone.reached:nth-child(3) { background: #d45aa0; } /* ~33% pink */
@@ -1222,12 +1222,12 @@ nav.sidebar-section:not(.sidebar-nav-mobile) {
 .milestone.reached:nth-child(5) { background: #7785ac; } /* ~50% */
 .milestone.reached:nth-child(6) { background: #33a3b6; } /* ~62% */
 .milestone.reached:nth-child(7) { background: #4889d8; } /* ~80% */
-.milestone.reached:nth-child(8) { background: #ff4d88; } /* 100% */
+.milestone.reached:nth-child(8) { background: #7c4dff; } /* 100% */
 
 .milestone.current {
 	color: white;
 	transform: scale(1.15);
-	box-shadow: 0 2px 8px rgba(217, 90, 138, 0.4);
+	box-shadow: 0 2px 8px rgba(145, 99, 184, 0.4);
 }
 
 .milestone.next {
@@ -2614,7 +2614,7 @@ input:checked + .toggle-slider::before {
 	margin-top: var(--spacing-lg);
 	text-align: center;
 	padding: 0.75rem 1.5rem;
-	background: linear-gradient(135deg, rgba(217, 90, 138, 0.1), rgba(212, 90, 160, 0.1), rgba(26, 175, 184, 0.1));
+	background: linear-gradient(135deg, rgba(145, 99, 184, 0.1), rgba(212, 90, 160, 0.1), rgba(26, 175, 184, 0.1));
 	border-radius: var(--border-radius-md);
 	color: var(--light-text);
 	font-size: 0.9rem;
@@ -3652,7 +3652,7 @@ input:checked + .toggle-slider::before {
 
 /* Apply section colors to nav links */
 .nav-link[data-section="css"] {
-	color: #d95a8a;
+	color: #9163b8;
 }
 
 .nav-link[data-section="html"] {
@@ -3673,8 +3673,8 @@ input:checked + .toggle-slider::before {
 
 .nav-link[data-section="css"]:hover,
 .nav-link[data-section="css"].active {
-	background: rgba(217, 90, 138, 0.1);
-	color: #a83d65;
+	background: rgba(145, 99, 184, 0.1);
+	color: #724a95;
 }
 
 .nav-link[data-section="html"]:hover,
@@ -3703,12 +3703,12 @@ input:checked + .toggle-slider::before {
 
 /* Hint section colors */
 body[data-section="css"] .hint {
-	background: rgba(217, 90, 138, 0.3);
+	background: rgba(145, 99, 184, 0.3);
 	border-left-color: #a98cd6;
 }
 
 body[data-section="css"] .hint-progress {
-	background: #d95a8a;
+	background: #9163b8;
 }
 
 body[data-section="html"] .hint {
@@ -3773,7 +3773,7 @@ body[data-section="javascript"] .hint-progress {
 .ref-nav-link[data-ref="selectors"],
 .ref-nav-link[data-ref="flexbox"],
 .ref-nav-link[data-ref="grid"] {
-	color: #d95a8a;
+	color: #9163b8;
 }
 
 .ref-nav-link[data-ref="css"]:hover,
@@ -3784,8 +3784,8 @@ body[data-section="javascript"] .hint-progress {
 .ref-nav-link[data-ref="flexbox"].active,
 .ref-nav-link[data-ref="grid"]:hover,
 .ref-nav-link[data-ref="grid"].active {
-	background: rgba(217, 90, 138, 0.15);
-	color: #a83d65;
+	background: rgba(145, 99, 184, 0.15);
+	color: #724a95;
 }
 
 .ref-nav-link[data-ref="html"] {
@@ -3800,21 +3800,21 @@ body[data-section="javascript"] .hint-progress {
 
 /* CodeMirror section color overrides */
 body[data-section="css"] .cm-editor .cm-content {
-	caret-color: #d95a8a !important;
+	caret-color: #9163b8 !important;
 }
 
 body[data-section="css"] .cm-editor .cm-cursor,
 body[data-section="css"] .cm-editor .cm-dropCursor {
-	border-left-color: #d95a8a !important;
+	border-left-color: #9163b8 !important;
 }
 
 body[data-section="css"] .cm-editor .cm-selectionBackground,
 body[data-section="css"] .cm-editor .cm-content ::selection {
-	background-color: rgba(217, 90, 138, 0.25) !important;
+	background-color: rgba(145, 99, 184, 0.25) !important;
 }
 
 body[data-section="css"] .cm-editor .cm-activeLine {
-	background-color: rgba(217, 90, 138, 0.08) !important;
+	background-color: rgba(145, 99, 184, 0.08) !important;
 }
 
 body[data-section="html"] .cm-editor .cm-content {
@@ -3891,12 +3891,12 @@ body[data-section="javascript"] .cm-editor .cm-activeLine {
 
 /* Module pill section colors */
 body[data-section="css"] .module-pill {
-	background: rgba(217, 90, 138, 0.1);
-	color: #d95a8a;
+	background: rgba(145, 99, 184, 0.1);
+	color: #9163b8;
 }
 
 body[data-section="css"] .module-pill .level-indicator {
-	color: #a83d65;
+	color: #724a95;
 }
 
 body[data-section="html"] .module-pill {
@@ -3937,7 +3937,7 @@ body[data-section="javascript"] .module-pill .level-indicator {
 
 /* Code block border section colors */
 body[data-section="css"] .code-block {
-	border-color: rgba(217, 90, 138, 0.4);
+	border-color: rgba(145, 99, 184, 0.4);
 }
 
 body[data-section="html"] .code-block {
@@ -3979,7 +3979,7 @@ body[data-section="javascript"] .code-block .cm-editor .cm-line {
 
 /* Task instruction bubble section colors */
 [data-section="css"] .task-instruction {
-	background: rgba(217, 90, 138, 0.92);
+	background: rgba(145, 99, 184, 0.92);
 }
 
 [data-section="html"] .task-instruction {
@@ -4000,7 +4000,7 @@ body[data-section="javascript"] .code-block .cm-editor .cm-line {
 
 /* Section page progress bar colors */
 body[data-section="css"] .section-progress-bar .progress-fill {
-	background: #d95a8a;
+	background: #9163b8;
 }
 
 body[data-section="html"] .section-progress-bar .progress-fill {
@@ -4021,7 +4021,7 @@ body[data-section="javascript"] .section-progress-bar .progress-fill {
 
 /* Section page header colors */
 [data-section="css"] .section-hero h1 {
-	color: #d95a8a;
+	color: #9163b8;
 }
 
 [data-section="html"] .section-hero h1 {
@@ -4042,7 +4042,7 @@ body[data-section="javascript"] .section-progress-bar .progress-fill {
 
 /* Lesson title h2 section colors */
 body[data-section="css"] #lesson-title {
-	color: #d95a8a;
+	color: #9163b8;
 }
 
 body[data-section="html"] #lesson-title {