diff --git a/src/styles/utilities/_utilities.scss b/src/styles/utilities/_utilities.scss
deleted file mode 100644
index 70039d8..0000000
--- a/src/styles/utilities/_utilities.scss
+++ /dev/null
@@ -1,455 +0,0 @@
-@use '../abstracts/functions' as fn;
-@use '../abstracts/variables' as vars;
-@use '../abstracts/mixins' as mx;
-
-// Utility classes generator
-@each $name, $value in vars.$spacing {
-  .p-#{$name} {
-    padding: $value !important;
-  }
-
-  .px-#{$name} {
-    padding-left: $value !important;
-    padding-right: $value !important;
-  }
-
-  .py-#{$name} {
-    padding-bottom: $value !important;
-    padding-top: $value !important;
-  }
-
-  .pt-#{$name} {
-    padding-top: $value !important;
-  }
-
-  .pr-#{$name} {
-    padding-right: $value !important;
-  }
-
-  .pb-#{$name} {
-    padding-bottom: $value !important;
-  }
-
-  .pl-#{$name} {
-    padding-left: $value !important;
-  }
-
-  .m-#{$name} {
-    margin: $value !important;
-  }
-
-  .mx-#{$name} {
-    margin-left: $value !important;
-    margin-right: $value !important;
-  }
-
-  .my-#{$name} {
-    margin-bottom: $value !important;
-    margin-top: $value !important;
-  }
-
-  .mt-#{$name} {
-    margin-top: $value !important;
-  }
-
-  .mr-#{$name} {
-    margin-right: $value !important;
-  }
-
-  .mb-#{$name} {
-    margin-bottom: $value !important;
-  }
-
-  .ml-#{$name} {
-    margin-left: $value !important;
-  }
-
-  .gap-#{$name} {
-    gap: $value !important;
-  }
-}
-
-// Flexbox utilities
-.flex {
-  display: flex !important;
-}
-
-.inline-flex {
-  display: inline-flex !important;
-}
-
-.flex-row {
-  flex-direction: row !important;
-}
-
-.flex-col {
-  flex-direction: column !important;
-}
-
-.flex-wrap {
-  flex-wrap: wrap !important;
-}
-
-.flex-nowrap {
-  flex-wrap: nowrap !important;
-}
-
-.flex-1 {
-  flex: 1 1 0% !important;
-}
-
-// Justify content
-.justify-start {
-  justify-content: flex-start !important;
-}
-
-.justify-end {
-  justify-content: flex-end !important;
-}
-
-.justify-center {
-  justify-content: center !important;
-}
-
-.justify-between {
-  justify-content: space-between !important;
-}
-
-.justify-around {
-  justify-content: space-around !important;
-}
-
-// Align items
-.items-start {
-  align-items: flex-start !important;
-}
-
-.items-end {
-  align-items: flex-end !important;
-}
-
-.items-center {
-  align-items: center !important;
-}
-
-.items-stretch {
-  align-items: stretch !important;
-}
-
-// Grid
-.grid {
-  display: grid !important;
-}
-
-.grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
-}
-
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
-}
-
-.grid-cols-3 {
-  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
-}
-
-.grid-cols-4 {
-  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
-}
-
-// Border radius
-@each $name, $value in vars.$radius {
-  .rounded-#{$name} {
-    border-radius: $value !important;
-  }
-}
-
-// Text sizes
-@each $name, $value in vars.$font-sizes {
-  .text-#{$name} {
-    font-size: $value !important;
-  }
-}
-
-// Font weights
-@each $name, $value in vars.$font-weights {
-  .font-#{$name} {
-    font-weight: $value !important;
-  }
-}
-
-// Text align
-.text-left {
-  text-align: left !important;
-}
-
-.text-center {
-  text-align: center !important;
-}
-
-.text-right {
-  text-align: right !important;
-}
-
-// Colors
-.text-foreground {
-  color: vars.$foreground !important;
-}
-
-.text-muted-foreground {
-  color: vars.$muted-foreground !important;
-}
-
-.text-primary {
-  color: vars.$primary !important;
-}
-
-.text-destructive {
-  color: vars.$destructive !important;
-}
-
-.text-accent {
-  color: vars.$accent !important;
-}
-
-.bg-background {
-  background-color: vars.$background !important;
-}
-
-.bg-card {
-  background-color: vars.$card !important;
-}
-
-.bg-primary {
-  background-color: vars.$primary !important;
-}
-
-.bg-secondary {
-  background-color: vars.$secondary !important;
-}
-
-.bg-muted {
-  background-color: vars.$muted !important;
-}
-
-.bg-accent {
-  background-color: vars.$accent !important;
-}
-
-.bg-destructive {
-  background-color: vars.$destructive !important;
-}
-
-// Border
-.border { border: 1px solid vars.$border !important; }
-.border-b { border-bottom: 1px solid vars.$border !important; }
-.border-t { border-top: 1px solid vars.$border !important; }
-.border-l { border-left: 1px solid vars.$border !important; }
-.border-r { border-right: 1px solid vars.$border !important; }
-
-// Width & Height
-.w-full { width: 100% !important; }
-.h-full { height: 100% !important; }
-.min-h-screen { min-height: 100vh !important; }
-.max-w-3xl { max-width: 48rem !important; }
-.max-w-7xl { max-width: 80rem !important; }
-
-// Position
-.relative { position: relative !important; }
-.absolute { position: absolute !important; }
-.fixed { position: fixed !important; }
-.sticky { position: sticky !important; }
-
-// Display
-.hidden { display: none !important; }
-.block { display: block !important; }
-.inline-block { display: inline-block !important; }
-
-// Overflow
-.overflow-hidden { overflow: hidden !important; }
-.overflow-auto { overflow: auto !important; }
-.overflow-scroll { overflow: scroll !important; }
-
-// Cursor
-.cursor-pointer { cursor: pointer !important; }
-.cursor-not-allowed { cursor: not-allowed !important; }
-
-// Opacity
-.opacity-50 { opacity: 50% !important; }
-.opacity-75 { opacity: 75% !important; }
-.opacity-100 { opacity: 100% !important; }
-
-// Transitions
-.transition { transition: all 0.2s ease !important; }
-.transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important; }
-
-// Shadow
-.shadow-sm { @include mx.shadow-sm; }
-.shadow { @include mx.shadow; }
-.shadow-md { @include mx.shadow-md; }
-.shadow-lg { @include mx.shadow-lg; }
-
-// Space between children - DRY loop
-$space-values: (2, 3, 4, 6, 8);
-
-@each $value in $space-values {
-  .space-y-#{$value} > * + * { margin-top: fn.spacing($value) !important; }
-  .space-x-#{$value} > * + * { margin-left: fn.spacing($value) !important; }
-}
-
-// Additional height classes
-.h-9 { height: 2.25rem !important; }
-.h-10 { height: 2.5rem !important; }
-.h-12 { height: 3rem !important; }
-.h-16 { height: 4rem !important; }
-.h-24 { height: 6rem !important; }
-.h-32 { height: 8rem !important; }
-.h-60 { height: 15rem !important; }
-.h-screen { height: 100vh !important; }
-
-// Container
-.container {
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  width: 100%;
-
-  @media (width >= 640px) {
-    max-width: 640px;
-  }
-
-  @media (width >= 768px) {
-    max-width: 768px;
-  }
-
-  @media (width >= 1024px) {
-    max-width: 1024px;
-  }
-
-  @media (width >= 1280px) {
-    max-width: 1280px;
-  }
-}
-
-// Additional positioning
-.inset-0 {
-  inset: 0 !important;
-}
-
-.top-0 { top: 0 !important; }
-.left-0 { left: 0 !important; }
-.right-0 { right: 0 !important; }
-.bottom-0 { bottom: 0 !important; }
-
-// Z-index
-.z-10 { z-index: 10 !important; }
-.z-20 { z-index: 20 !important; }
-.z-30 { z-index: 30 !important; }
-.z-40 { z-index: 40 !important; }
-.z-50 { z-index: 50 !important; }
-
-// Whitespace
-.whitespace-nowrap { white-space: nowrap !important; }
-.whitespace-normal { white-space: normal !important; }
-
-// Pointer events
-.pointer-events-none { pointer-events: none !important; }
-
-// Outline
-.outline-none { outline: none !important; }
-
-// Shrink
-.shrink-0 { flex-shrink: 0 !important; }
-.shrink { flex-shrink: 1 !important; }
-
-// Overflow specific
-.overflow-x-hidden { overflow-x: hidden !important; }
-.overflow-y-auto { overflow-y: auto !important; }
-.overflow-y-hidden { overflow-y: hidden !important; }
-
-// Backdrop
-.backdrop-blur-md { backdrop-filter: blur(12px) !important; }
-
-// Gradients (using CSS custom properties for compatibility)
-.bg-gradient-to-r { 
-  background-image: linear-gradient(to right, var(--gradient-from-color, transparent), var(--gradient-to-color, transparent)) !important; 
-}
-
-.bg-gradient-to-br { 
-  background-image: linear-gradient(to bottom right, var(--gradient-from-color, transparent), var(--gradient-to-color, transparent)) !important; 
-}
-
-.from-primary { 
-  --gradient-from-color: hsl(var(--primary)) !important; 
-}
-
-.to-accent { 
-  --gradient-to-color: hsl(var(--accent)) !important; 
-}
-
-.via-accent { 
-  --gradient-via-color: hsl(var(--accent)) !important;
-}
-
-// Background clip
-.bg-clip-text {
-  background-clip: text !important;
-}
-
-// Text transparent for gradient text
-.text-transparent { color: transparent !important; }
-
-// Tracking (letter-spacing)
-.tracking-tight { letter-spacing: -0.025em !important; }
-
-// Shadow variants
-.shadow-xs {
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%) !important;
-}
-
-// Underline offset
-.underline-offset-4 {
-  text-underline-offset: 4px !important;
-}
-
-// Gap variations - only adding those NOT in spacing map
-.gap-1-5 {
-  gap: 0.375rem !important;
-} // 1.5 spacing not in map
-
-// Rounded variations (additional)
-.rounded-xs { border-radius: 0.125rem !important; }
-.rounded-full { border-radius: 9999px !important; }
-
-// SVG sizing - explicit class matches for h-5 and w-5
-svg.h-5 { height: 1.25rem !important; }
-svg.w-5 { width: 1.25rem !important; }
-
-// Button-specific utilities using nesting
-button {
-  &:disabled {
-    opacity: 50%;
-    pointer-events: none;
-  }
-
-  &:focus-visible {
-    outline: 2px solid hsl(var(--ring));
-    outline-offset: 2px;
-    box-shadow: 0 0 0 3px rgba(var(--ring-rgb), 0.1);
-  }
-  
-  &:focus {
-    outline: none;
-  }
-
-  // Ensure minimum touch target size (44px recommended)
-  min-height: 2.75rem; // 44px
-  min-width: 2.75rem; // 44px
-  padding: 0.5rem 1rem;
-  
-  svg {
-    flex-shrink: 0;
-    pointer-events: none;
-  }
-}