3 files changed, 31 insertions, 4 deletions
diff --git a/scss/custom-properties/_colours.scss b/scss/custom-properties/_colours.scss
index 138a724..d6e5deb 100644
--- a/scss/custom-properties/_colours.scss
+++ b/scss/custom-properties/_colours.scss
@@ -7,6 +7,8 @@
   --background-highlight-color: #{colours.$primary-10};
   --special-text-color: #{colours.$secondary-40};
   --special-text-highlight-color: #{colours.$secondary-90};
+  --neutral-text-color: #{colours.$neutral-70};
+  --neutral-background-color: #{colours.$neutral-95};
 }
 
 :root, .dark {
@@ -16,6 +18,8 @@
   --background-highlight-color: #{colours.$primary-90};
   --special-text-color: #{colours.$secondary-90};
   --special-text-highlight-color: #{colours.$secondary-10};
+  --neutral-text-color: #{colours.$neutral-50};
+  --neutral-background-color: #{colours.$neutral-30};
 }
 
 :is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)):not(.dark *) {
diff --git a/scss/modules/_btn.scss b/scss/modules/_btn.scss
index 6b5e543..a076c38 100644
--- a/scss/modules/_btn.scss
+++ b/scss/modules/_btn.scss
@@ -1,4 +1,4 @@
-.btn {
+:is(button, .btn) {
   display: block;
   border: solid var(--border-width) var(--text-color);
   font-weight: 600;
@@ -7,12 +7,13 @@
   padding-inline: var(--spacing-inline-md);
   padding-block: var(--spacing-block-sm);
   background-color: transparent;
+  cursor: pointer;
   transition:
     background-color 100ms,
     transform 100ms;
 }
 
-.btn:is(:hover, :focus, :focus-visible, :focus-within, :active) {
+:is(button, .btn):is(:hover, :focus, :focus-visible, :focus-within, :active) {
   box-shadow: none;
   outline: none;
   color: var(--text-highlight-color);
@@ -23,12 +24,12 @@
     transform 300ms;
 }
 
-.btn:is(:focus, :focus-visible, :focus-within) {
+:is(button, .btn):is(:focus, :focus-visible, :focus-within) {
   border-color: var(--special-text-highlight-color);
   border-style: dotted;
 }
 
-.btn:active {
+:is(button, .btn):active {
   transform: scale(1.1, 1.1);
 }
 
@@ -38,3 +39,10 @@ a.btn {
   text-decoration: none;
 }
 
+:is(button, .btn):is(:disabled, [disabled]) {
+  color: var(--neutral-text-color);
+  background-color: var(--neutral-background-color);
+  border-color: var(--neutral-text-color);
+  cursor: initial;
+}
+
diff --git a/scss/values/_colours.scss b/scss/values/_colours.scss
index 40db6e8..5c00e7d 100644
--- a/scss/values/_colours.scss
+++ b/scss/values/_colours.scss
@@ -32,3 +32,18 @@ $secondary-98: #e4fffb;
 $secondary-99: #f2fffc;
 $secondary-100: #ffffff;
 
+$neutral-0: #000;
+$neutral-10: #03020f;
+$neutral-20: #141327;
+$neutral-30: #2c2b41;
+$neutral-40: #45455d;
+$neutral-50: #61607a;
+$neutral-60: #7d7d98;
+$neutral-70: #9b9bb7;
+$neutral-80: #bbbbd7;
+$neutral-90: #dbdbf8;
+$neutral-95: #ecedff;
+$neutral-98: #f7f8ff;
+$neutral-99: #fbfbff;
+$neutral-100: #fff;
+