Improves colour palette

1 files changed, 48 insertions, 14 deletions

diff --git a/public/main.css b/public/main.css
index fcdf397..2fa00b6 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,29 +1,60 @@
 :root {
+  /*
+   * This colour palette should not be accessed directly. Instead, use *
+   * design system variables like --text-color, --background-color or  *
+   * --special-colour.                                                 *
+   */
+  
   --color-primary-50: #eeecff;
   --color-primary-50: oklch(95% 0.02 290);
   --color-primary-100: #cec5ff;
   --color-primary-100: oklch(85% 0.07 290);
   --color-primary-200: #b19cff;
   --color-primary-200: oklch(75% 0.13 290);
-  /* --color-primary-300: #937be3;
+  --color-primary-300: #937be3;
   --color-primary-300: oklch(65% 0.15 290);
   --color-primary-400: #765cc1;
-  --color-primary-400: oklch(55% 0.15 290); */
+  --color-primary-400: oklch(55% 0.15 290);
   --color-primary-500: #5a3ea1;
   --color-primary-500: oklch(45% 0.15 290);
-  /* --color-primary-600: #401f81;
+  --color-primary-600: #401f81;
   --color-primary-600: oklch(35% 0.15 290);
   --color-primary-700: #28005c;
-  --color-primary-700: oklch(25% 0.14 290); */
+  --color-primary-700: oklch(25% 0.14 290);
   --color-primary-800: #0f002a;
   --color-primary-800: oklch(15% 0.08 290);
   --color-primary-900: #010003;
   --color-primary-900: oklch(5% 0.02 290);
-
+  
+  --color-secondary-50: #bcffee;
+  --color-secondary-50: oklch(95% 0.07 178.02852951497042);
+  --color-secondary-100: #2bedce;
+  --color-secondary-100: oklch(85% 0.15 178.02852951497042);
+  --color-secondary-200: #2ac8ae;
+  --color-secondary-200: oklch(75% 0.13 178.02852951497042);
+  --color-secondary-300: #28a58f;
+  --color-secondary-300: oklch(65% 0.11 178.02852951497042);
+  --color-secondary-400: #068472;
+  --color-secondary-400: oklch(55% 0.1 178.02852951497042);
+  --color-secondary-500: #0a6355;
+  --color-secondary-500: oklch(45% 0.08 178.02852951497042);
+  --color-secondary-600: #09453a;
+  --color-secondary-600: oklch(35% 0.06 178.02852951497042);
+  --color-secondary-700: #062822;
+  --color-secondary-700: oklch(25% 0.04 178.02852951497042);
+  --color-secondary-800: #030e0b;
+  --color-secondary-800: oklch(15% 0.02 178.02852951497042);
+  --color-secondary-900: #000101;
+  --color-secondary-900: oklch(6% 0.01 178.02852951497042);
+  
   --text-color: var(--color-primary-50);
   --text-highlight-color: var(--color-primary-100);
-  --background-color: var(--color-primary-900);
-  --background-highlight-color: var(--color-primary-800);
+  --background-color: var(--color-primary-800);
+  --background-highlight-color: var(--color-primary-700);
+  --special-text-color: var(--color-secondary-200);
+  --special-text-highlight-color: var(--color-secondary-300);
+  --special-background-color: var(--color-secondary-900);
+  --special-background-highlight-color: var(--color-secondary-800);
 
   --max-width-prose-content: 35rem;
   --max-width-all-content: 56.6rem; /* golden ratio * prose content width */
@@ -71,6 +102,10 @@
   --text-highlight-color: var(--color-primary-800);
   --background-color: var(--color-primary-50);
   --background-highlight-color: var(--color-primary-200);
+  --special-text-color: var(--color-secondary-700);
+  --special-text-highlight-color: var(--color-secondary-600);
+  --special-background-color: var(--color-secondary-50);
+  --special-background-highlight-color: var(--color-secondary-100);
   color: var(--text-color);
   background-color: var(--background-color);
 }
@@ -92,6 +127,7 @@
 
 :is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) {
   --background-color: var(--color-primary-100);
+  background-color: var(--background-color);
 }
 
 .title,
@@ -148,13 +184,10 @@ p:not(:first) {
   padding-block-start: var(--spacing-block-md);
 }
 
-a {
-  color: var(--text-color);
-}
-
 .link {
+  color: var(--special-text-color);
   text-decoration: underline;
-  text-decoration-color: var(--text-color);
+  text-decoration-color: var(--special-text-color);
   border: dotted transparent 2px;
   border-radius: 0.375rem;
   transition:
@@ -169,15 +202,16 @@ a {
 }
 
 .link:focus {
-  border-color: var(--color-primary-500);
+  border-color: var(--special-text-color);
 }
 
 .link:active {
   font-weight: 700;
-  color: var(--color-primary-500);
+  color: var(--special-text-highlight-color);
 }
 
 .btn {
+  color: var(--text-color);
   border: solid 2px var(--text-color);
   font-weight: 500;
   text-decoration: underline;