From d6c7c43b1a2f4d43cb2e5bacfd57f9edd95aae3f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 19 Jan 2026 21:50:36 +0000
Subject: [PATCH] Fix code review issues: centralize variables, remove
 duplication, use SCSS vars consistently

Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
---
 src/app/theme.scss                     | 30 ++------------------------
 src/styles/abstracts/_variables.scss   |  8 +++++++
 src/styles/components/_buttons.scss    |  2 +-
 src/styles/components/_cards.scss      |  4 ++--
 src/styles/components/_forms.scss      |  2 +-
 src/styles/components/_typography.scss |  2 +-
 6 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/src/app/theme.scss b/src/app/theme.scss
index ff0d974..5e2e658 100644
--- a/src/app/theme.scss
+++ b/src/app/theme.scss
@@ -3,36 +3,10 @@
 @import '@radix-ui/colors/blue-dark.css';
 @import '@radix-ui/colors/violet-dark.css';
 
-// Spacing scale variables
-$size-scale: 1;
-$size-0: 0px;
-$size-px: 1px;
-$size-0-5: calc(0.125rem * $size-scale);
-$size-1: calc(0.25rem * $size-scale);
-$size-2: calc(0.5rem * $size-scale);
-$size-3: calc(0.75rem * $size-scale);
-$size-4: calc(1rem * $size-scale);
-$size-5: calc(1.25rem * $size-scale);
-$size-6: calc(1.5rem * $size-scale);
-$size-8: calc(2rem * $size-scale);
-$size-10: calc(2.5rem * $size-scale);
-$size-12: calc(3rem * $size-scale);
-$size-16: calc(4rem * $size-scale);
-$size-20: calc(5rem * $size-scale);
-$size-24: calc(6rem * $size-scale);
-
-// Border radii
-$radius-factor: 1;
-$radius-sm: calc(2px * $radius-factor * $size-scale);
-$radius-md: calc(6px * $radius-factor * $size-scale);
-$radius-lg: calc(8px * $radius-factor * $size-scale);
-$radius-xl: calc(12px * $radius-factor * $size-scale);
-$radius-full: 9999px;
-
 // App-level CSS variables
 #spark-app {
-  --size-scale: #{$size-scale};
-  --radius-factor: #{$radius-factor};
+  --size-scale: 1;
+  --radius-factor: 1;
   
   // Neutral colors (using slate from Radix)
   --color-neutral-1: var(--slate-1);
diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index 7f89f2b..7439853 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -143,3 +143,11 @@ $z-index: (
   50: 50,
   auto: auto,
 );
+
+// Shadow values
+$shadow-accent: rgba(99, 242, 255, 0.1);
+$shadow-accent-md: rgba(99, 242, 255, 0.15);
+$shadow-focus: rgba(99, 242, 255, 0.1);
+
+// Hover colors
+$accent-hover: hsl(195, 100%, 75%);
diff --git a/src/styles/components/_buttons.scss b/src/styles/components/_buttons.scss
index 2ada3dd..d815630 100644
--- a/src/styles/components/_buttons.scss
+++ b/src/styles/components/_buttons.scss
@@ -21,7 +21,7 @@
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 3px var(--color-bg-inset), 0 0 0 6px var(--color-focus-ring);
+    box-shadow: 0 0 0 3px $secondary, 0 0 0 6px $ring;
   }
 
   &:disabled {
diff --git a/src/styles/components/_cards.scss b/src/styles/components/_cards.scss
index 023ffd5..0281144 100644
--- a/src/styles/components/_cards.scss
+++ b/src/styles/components/_cards.scss
@@ -11,7 +11,7 @@
 
   &:hover {
     border-color: $accent;
-    box-shadow: 0 4px 12px rgba(99, 242, 255, 0.1);
+    box-shadow: 0 4px 12px $shadow-accent;
   }
 
   &__header {
@@ -54,7 +54,7 @@
   &--hover-lift {
     &:hover {
       transform: translateY(-4px);
-      box-shadow: 0 12px 24px rgba(99, 242, 255, 0.15);
+      box-shadow: 0 12px 24px $shadow-accent-md;
     }
   }
 
diff --git a/src/styles/components/_forms.scss b/src/styles/components/_forms.scss
index cb0da0e..78c24ef 100644
--- a/src/styles/components/_forms.scss
+++ b/src/styles/components/_forms.scss
@@ -32,7 +32,7 @@
     &:focus {
       outline: none;
       border-color: $ring;
-      box-shadow: 0 0 0 3px rgba(99, 242, 255, 0.1);
+      box-shadow: 0 0 0 3px $shadow-focus;
     }
 
     &::placeholder {
diff --git a/src/styles/components/_typography.scss b/src/styles/components/_typography.scss
index f98f679..70da68f 100644
--- a/src/styles/components/_typography.scss
+++ b/src/styles/components/_typography.scss
@@ -82,7 +82,7 @@ a {
   transition: color 0.2s ease;
 
   &:hover {
-    color: hsl(195, 100%, 75%);
+    color: $accent-hover;
     text-decoration: underline;
   }