ai generated solutions to our ai generated problems

frontend/src/styles.css

@@ -200,33 +200,64 @@ h3 {
 }
 
 .pixel-sun,
-.pixel-moon {
+.pixel-moon-group {
   position: absolute;
   display: block;
-  image-rendering: pixelated;
-  image-rendering: crisp-edges;
   transform: translate(-50%, -50%);
   will-change: left, opacity, top, transform;
 }
 
+.pixel-sun,
+.pixel-moon {
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+}
+
 .pixel-sun {
   left: 78%;
   top: 18%;
   width: 128px;
   height: 128px;
+  color: var(--color-fury-glow);
+  --sprite-light: var(--color-soft-apricot-200);
+  --sprite-shine: var(--color-soft-apricot-50);
+  --sprite-shadow: var(--color-fury-violet);
 }
 
-.pixel-moon {
+.pixel-moon-group {
   left: 78%;
   top: 18%;
   width: 136px;
   height: 136px;
+  color: var(--color-border);
+  --sprite-light: var(--color-soft-apricot-50);
+  --sprite-mid: var(--color-fury-glow);
+  --sprite-shadow: var(--color-fury-violet);
+  --sprite-shine: #ffffff;
 }
 
-.pixel-stars {
+:root[data-theme="dark"] .pixel-moon-group {
+  color: #1f2749;
+  --sprite-light: #fff6df;
+  --sprite-mid: #8fb2d9;
+  --sprite-shadow: #5f83b1;
+  --sprite-shine: #ffffff;
+}
+
+.pixel-moon {
   position: absolute;
-  left: 78%;
-  top: 18%;
+  left: 0;
+  top: 0;
+  width: 136px;
+  height: 136px;
+  transform: translate(-50%, -50%);
+}
+
+:root[data-theme="dark"] .pixel-sun {
+  color: var(--color-fury-violet);
+  --sprite-light: var(--color-fury-glow);
+  --sprite-shine: var(--color-soft-apricot-100);
+  --sprite-shadow: var(--color-fury-cyan);
 }
 
 .pixel-star {
@@ -254,11 +285,11 @@ h3 {
 }
 
 .pixel-sky-light .pixel-sun,
-.pixel-sky-dark .pixel-moon {
+.pixel-sky-dark .pixel-moon-group {
   opacity: 1;
 }
 
-.pixel-sky-light .pixel-moon,
+.pixel-sky-light .pixel-moon-group,
 .pixel-sky-dark .pixel-sun {
   opacity: 0;
 }
@@ -273,7 +304,7 @@ h3 {
   transform: none;
 }
 
-.pixel-sky-light-to-dark .pixel-moon {
+.pixel-sky-light-to-dark .pixel-moon-group {
   animation: celestialPathEnter 980ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
   left: 0;
   offset-anchor: center;
@@ -283,7 +314,7 @@ h3 {
   transform: none;
 }
 
-.pixel-sky-dark-to-light .pixel-moon {
+.pixel-sky-dark-to-light .pixel-moon-group {
   animation: celestialPathExit 980ms cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
   left: 0;
   offset-anchor: center;