From d479f3aabf3eee4713c4e8187847a11aa34b7500 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 14 Jul 2026 18:02:10 +0300
Subject: [PATCH] fix(theme): render btn-shadow via box-shadow so light fills
 aren't tinted

---
 src/shared/styles/theme.css | 34 ++++++++++------------------------
 1 file changed, 10 insertions(+), 24 deletions(-)

diff --git a/src/shared/styles/theme.css b/src/shared/styles/theme.css
index c8650e8..215b4b2 100644
--- a/src/shared/styles/theme.css
+++ b/src/shared/styles/theme.css
@@ -255,37 +255,23 @@
   transition: transform 130ms var(--ease-micro);
 }
 
-/* Offset "shadow" as a pseudo-block, not box-shadow: box-shadow repaints on
- * the main thread while the button's translate runs on the compositor, so the
- * two desync per frame. Animating both as transforms keeps them frame-synced. */
+/* Hard offset block via box-shadow, so it sits outside the border box and never
+ * tints a light fill. Shadow rides the element's own transform, so it can't
+ * desync from the button's translate the way a separate pseudo-element could.
+ * Offsets are net of the translate: shadow lands at translate + shadow-offset. */
 .btn-shadow {
-  position: relative;
-  z-index: 0;
-  transition: transform 130ms var(--ease-micro);
-}
-.btn-shadow::before {
-  content: "";
-  position: absolute;
-  /* ponytail: inset:0 tracks the padding box, ~1.5px shy of the border box;
-   * imperceptible on a hard offset block. Widen with negative inset if it shows. */
-  inset: 0;
-  z-index: -1;
-  border-radius: inherit;
-  background: var(--shadow-color);
-  transform: translate(3px, 3px);
-  transition: transform 130ms var(--ease-micro);
+  box-shadow: 3px 3px 0 var(--shadow-color);
+  transition:
+    transform 130ms var(--ease-micro),
+    box-shadow 130ms var(--ease-micro);
 }
 .btn-shadow:hover {
   transform: translate(-2px, -2px);
-}
-.btn-shadow:hover::before {
-  transform: translate(5px, 5px);
+  box-shadow: 7px 7px 0 var(--shadow-color);
 }
 .btn-shadow:active {
   transform: translate(2px, 2px);
-}
-.btn-shadow:active::before {
-  transform: translate(1px, 1px);
+  box-shadow: -1px -1px 0 var(--shadow-color);
 }
 
 /* Brutalist utility classes */