Fix missing CSS variables and broken selectors

package.json

@@ -11,7 +11,7 @@
   },
   "userStyle": {
     "namespace": "github.com/aaronedev/violet-void-theme",
-    "version": "20260323.12.47"
+    "version": "20260326.09.42"
   },
   "scripts": {
     "build": "node scripts/build.js",

src/components/accessibility.styl

@@ -67,7 +67,7 @@ textarea:focus-visible
 .focus-ring
   &:focus-visible
     outline none
-    box-shadow 0 0 0 3px $bg, 0 0 0 5px $arch-blue
+    box-shadow 0 0 0 3px $base, 0 0 0 5px $arch-blue
     border-radius $border-radius-md
     transition box-shadow 0.2s ease
 

src/components/advisory.styl

@@ -109,17 +109,17 @@
 
 // Version-specific notes
 .note-box.version
-  background linear-gradient(135deg, rgba($purple, 0.12), rgba($purple, 0.04))
-  border 1px solid rgba($purple, 0.3)
-  border-inline-start 4px solid $purple
+  background linear-gradient(135deg, rgba($arch-blue, 0.12), rgba($arch-blue, 0.04))
+  border 1px solid rgba($arch-blue, 0.3)
+  border-inline-start 4px solid $arch-blue
   border-radius $border-radius-md
   padding 1em 1.25em
   margin 1em 0
   color $light
 
   &::before
     content "📦 VERSION: "
-    color $purple
+    color $arch-blue
     font-weight 600
 
 // Architecture-specific notes

src/components/community.styl

@@ -1051,7 +1051,7 @@
   height 28px
   border-radius 50%
   background $arch-blue
-  border 2px solid $bg-primary
+  border 2px solid $base
   display flex
   align-items center
   justify-content center
@@ -1074,7 +1074,7 @@
     width 8px
     height 8px
     background $green
-    border 2px solid $bg-primary
+    border 2px solid $base
     border-radius 50%
 
   // Idle state

src/components/content.styl

@@ -1769,7 +1769,7 @@ dd
 // ===== Background Blend Mode for Cards =====
 // Card with subtle texture effect
 .card-background-blend
-  background-color $surface
+  background-color $base
   background-image radial-gradient(circle at 50% 0%, rgba($arch-blue, 0.08) 0%, transparent 70%)
   background-blend-mode normal, screen
   background-position center top
@@ -1788,14 +1788,14 @@ dd
 // ===== Background Blend Mode for Info Boxes =====
 // Info box with subtle gradient blend
 .infobox-background-blend
-  background linear-gradient(135deg, $surface 0%, rgba($arch-blue, 0.03) 100%)
+  background linear-gradient(135deg, $base 0%, rgba($arch-blue, 0.03) 100%)
   background-blend-mode normal, overlay
-  background-color $surface
+  background-color $base
 
 // ===== Background Blend Mode for Navigation =====
 // Nav with background blend
 .nav-background-blend
-  background-color $nav-bg
+  background-color $darker
   background-image linear-gradient(180deg, rgba($arch-blue, 0.05) 0%, transparent 20%)
   background-blend-mode normal, screen
 

src/components/extensions.styl

@@ -111,15 +111,15 @@
 
   &.oo-ui-option-selected
     background rgba($arch-blue, 0.2)
-    color $accent
+    color $arch-blue
 
 // VisualEditor formatting dialogs
 .ve-ui-dialog
 .ve-ui-mwDialog
   background $darker
   border 1px solid $border-subtle
   border-radius $border-radius-lg
-  box-shadow $shadow-modal
+  box-shadow $shadow-elevated
 
 // VisualEditor dialog title
 .ve-ui-dialog-title
@@ -450,7 +450,7 @@ math
 
   // Math numbers
   .mwe-math-number
-    color $accent
+    color $arch-blue
 
 // Equation numbering (when enabled)
 .mw-math-numbering
@@ -468,7 +468,7 @@ math
     top 0
     font-size 0.85em
     color rgba($light, 0.5)
-    font-family $font-ui
+    font-family $font-sans
 
 // Display math (block-level equations)
 .mw-display-math
@@ -566,7 +566,7 @@ mo
 
 // MathML numbers
 mn
-  color $accent
+  color $arch-blue
 
 // MathML variables
 mi

src/components/forms-enhanced.styl

@@ -2088,8 +2088,8 @@ input:read-write
 textarea:read-write
 select:read-write
   background $base
-  border-color $border
-  color $text
+  border-color $border-subtle
+  color $light
   cursor text
   transition border-color 0.2s ease, box-shadow 0.2s ease
 
@@ -2103,8 +2103,8 @@ input.editable
 textarea.editable
 select.editable
   background $base
-  border-color $border
-  color $text
+  border-color $border-subtle
+  color $light
   cursor text
 
   &:focus-visible

src/components/gradient-borders.styl

@@ -305,7 +305,7 @@
 // RESPONSIVE GRADIENT BORDERS
 // =============================================================================
 
-@media (max-width $breakpoint-sm)
+@media (max-width 768px)
   .gradient-border
   .gradient-border-custom
   .gradient-border-arch

src/components/history.styl

@@ -96,8 +96,8 @@
     display inline-block
     padding 0.1em 0.4em
     margin 0.1em
-    background-color rgba($purple, 0.15)
-    color $purple
+    background-color rgba($arch-blue, 0.15)
+    color $arch-blue
     border-radius $border-radius-sm
 
 // History pagination
@@ -359,8 +359,8 @@
 .bot-edit
   font-size 0.65em
   padding 0.15em 0.4em
-  background-color rgba($purple, 0.2)
-  color $purple
+  background-color rgba($arch-blue, 0.2)
+  color $arch-blue
   border-radius 2px
   text-transform uppercase
   letter-spacing 0.05em

src/components/interwiki.styl

@@ -79,7 +79,7 @@
     .preview-title
       font-weight 600
       font-size 0.9rem
-      color $text
+      color $light
       flex 1
       overflow hidden
       text-overflow ellipsis
@@ -161,19 +161,19 @@ a.external.text
     border-left 3px solid $secondary-red
 
   &.wikinews
-    border-left 3px solid $purple
+    border-left 3px solid $arch-blue
 
   &.wikisource
-    border-left 3px solid $yellow
+    border-left 3px solid $gold
 
   &.wikiquote
-    border-left 3px solid $cyan
+    border-left 3px solid $term-cyan
 
   &.wikimedia-commons
     border-left 3px solid $arch-blue
 
 // Mobile adjustments
-@media (max-width $breakpoint-sm)
+@media (max-width 768px)
   .interwiki-preview
     width calc(100vw - 32px)
     max-width calc(100vw - 32px)

src/components/lua.styl

@@ -296,7 +296,7 @@
 // Lua syntax highlighting within code blocks
 .lua-code
   .keyword
-    color $purple
+    color $arch-blue
     font-weight 600
 
   .string
@@ -763,7 +763,7 @@
 
       // Boolean output
       &.boolean
-        color $purple
+        color $arch-blue
 
       // Number output
       &.number

src/components/message-boxes.styl

@@ -125,7 +125,7 @@
       text-decoration underline
 
 // Mobile responsive
-@media (max-width $breakpoint-sm)
+@media (max-width 768px)
   .ambox
     padding 0.5em 0.75em
 

src/components/mobile.styl

@@ -313,7 +313,7 @@ table.mw-html-magic-mw-data-interface
       // Header cells need higher z-index
       thead th:first-child
         z-index 3
-        background $base-secondary
+        background $base
 
 // Priority-based column hiding for very small screens
 // Uses data-priority attribute for column importance
@@ -374,7 +374,7 @@ table.mw-html-magic-mw-data-interface
         border 1px solid $border-subtle
         border-radius 4px
         padding 0.5em
-        background $base-secondary
+        background $base
 
       th
       td
@@ -388,7 +388,7 @@ table.mw-html-magic-mw-data-interface
         &::before
           content attr(data-label)
           font-weight 600
-          color $text-muted
+          color $muted
           margin-right 0.5em
           font-size 0.85em
 
@@ -399,8 +399,8 @@ table.mw-html-magic-mw-data-interface
     justify-content space-between
     padding 0.25em 0.5em
     font-size 0.75em
-    color $text-muted
-    background $base-secondary
+    color $muted
+    background $base
     border-radius 4px 4px 0 0
 
     .scroll-position

src/components/modern-css.styl

@@ -1849,7 +1849,7 @@ h4[id]
 @media (monochrome 0)
   // Not monochrome - full color
   .mono-adapt
-    color $text
+    color $light
     background $base
 
 
@@ -1919,10 +1919,10 @@ h4[id]
 
 :host([variant="secondary"])
   background $base
-  color $text
+  color $light
 
 :host([variant="danger"])
-  background $error-red
+  background $red
   color $light
 
 // Size variants via host attributes

src/components/notifications.styl

@@ -109,7 +109,7 @@
   background $dark
   border 1px solid $border-subtle
   border-radius $border-radius-lg
-  box-shadow $shadow-lg
+  box-shadow $shadow-elevated
   max-width 360px
   width 100%
   overflow hidden
@@ -381,7 +381,7 @@
   background $dark
   border 1px solid $border-subtle
   border-radius $border-radius-md
-  box-shadow $shadow-lg
+  box-shadow $shadow-elevated
 
   .mw-echo-notification-ago
     font-size 0.75rem
@@ -459,7 +459,7 @@
 // MOBILE NOTIFICATIONS
 // =============================================================================
 
-@media (max-width $breakpoint-md)
+@media (max-width 1024px)
   .notification-panel
     max-width 100%
     border-radius 0

src/components/preferences.styl

@@ -598,10 +598,10 @@ button.mw-prefs-reset-all
 
   // Syntax highlighting classes (applied by JS)
   .css-selector
-    color $cyan
+    color $term-cyan
 
   .css-property
-    color $yellow
+    color $gold
 
   .css-value
     color $green
@@ -614,7 +614,7 @@ button.mw-prefs-reset-all
     color $orange
 
   .css-number
-    color $magenta
+    color $term-magenta
 
 // Validation error display
 .css-validation-errors

src/components/print-enhanced.styl

@@ -1368,7 +1368,7 @@
   // TOC leader (dots)
   .print-toc-leader
     flex-grow 1
-    border-bottom 1px dotted $print-border-dark
+    border-bottom 1px dotted $print-border
     margin 0 0.5em
     min-width 20px