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

@@ -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);

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%);

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 {

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;
     }
   }
 

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 {

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;
   }