[O] Migrate sass usage

src/app.sass

@@ -1,5 +1,5 @@
 @use "sass:color"
-@import "colors"
+@use "colors"
   
 :root
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif
@@ -17,7 +17,7 @@
 
 a
   font-weight: 500
-  color: $color-accent
+  color: colors.$accent
   text-decoration: inherit
   &:hover
     text-decoration: underline
@@ -45,9 +45,9 @@ button
   transition: all 0.25s
 
   &:hover
-    color: $color-accent
+    color: colors.$accent
     transform: translateY(-2px)
-    filter: drop-shadow(0 0 0.5em color.scale($color-accent, $alpha: -90%))
+    filter: drop-shadow(0 0 0.5em color.scale(colors.$accent, $alpha: -90%))
   
   &:focus, &:focus-visible
     outline: none
@@ -62,23 +62,23 @@ main
 .heading
   font-family: "Caveat", cursive
   font-size: 3em
-  background: $color-accent-strong
-  background: -webkit-linear-gradient(70deg, $color-accent-strong, $color-accent)
-  background: linear-gradient(70dge, $color-accent-strong, $color-accent)
+  background: colors.$accent-strong
+  background: -webkit-linear-gradient(70deg, colors.$accent-strong, colors.$accent)
+  background: linear-gradient(70dge, colors.$accent-strong, colors.$accent)
   -webkit-background-clip: text
   -webkit-text-fill-color: transparent
   line-height: 1
 
   will-change: filter
   transition: filter 300ms
-  filter: drop-shadow(0 0 1em color.scale($color-accent-strong, $alpha: -80%))
+  filter: drop-shadow(0 0 1em color.scale(colors.$accent-strong, $alpha: -80%))
   &:hover
-    filter: drop-shadow(0 0 2em color.scale($color-accent-strong, $alpha: -20%))
+    filter: drop-shadow(0 0 2em color.scale(colors.$accent-strong, $alpha: -20%))
 
 .edit-mode-banner
   font-size: 1.2em
   text-align: center
-  color: $color-accent-strong
+  color: colors.$accent-strong
 
 .sub-heading
   display: flex
@@ -102,7 +102,7 @@ main
   width: 30px
 
   &.selected
-    border-color: $color-accent
+    border-color: colors.$accent
 
   input
     padding: 0

src/colors.sass

@@ -1,6 +1,6 @@
 
-$color-dot: #aaa
-$color-line: #90A4AEFF
-$color-cross: #ff7f7f
-$color-accent-strong: #EF629F
-$color-accent: #EECDA3
+$dot: #aaa
+$line: #90A4AEFF
+$cross: #ff7f7f
+$accent-strong: #EF629F
+$accent: #EECDA3

src/puzzle.sass

@@ -1,7 +1,7 @@
 @use "sass:color"
-@import "colors"
+@use "colors"
 
-@debug color.scale($color-line, $alpha: -30%)
+@debug color.scale(colors.$line, $alpha: -30%)
 
 .puzzle-grid
   margin: 1em auto
@@ -16,8 +16,8 @@
   font-size: 11px
 
   &.error
-    color: $color-cross
-    background: color.scale($color-cross, $alpha: -90%)
+    color: colors.$cross
+    background: color.scale(colors.$cross, $alpha: -90%)
 
   &.complete
     opacity: 0.5
@@ -28,8 +28,8 @@
   &.vertical
     width: 4px
     height: 20px
-    border-top: 4px solid $color-dot
-    border-bottom: 4px solid $color-dot
+    border-top: 4px solid colors.$dot
+    border-bottom: 4px solid colors.$dot
 
     &.crossed:before, &.auto-crossed:before
       left: 0
@@ -45,7 +45,7 @@
   &.crossed:before, &.auto-crossed:before
     content: "x"
     font-size: 10px
-    color: $color-cross
+    color: colors.$cross
     position: absolute
     top: -7px