3 files changed, 49 insertions, 49 deletions
diff --git a/public/css/palette-hex.css b/public/css/palette-hex.css
new file mode 100644
index 0000000..13a9d7c
--- /dev/null
+++ b/public/css/palette-hex.css
@@ -0,0 +1,23 @@
+:root {
+  --color-primary-50: #eeecff;
+  --color-primary-100: #cec5ff;
+  --color-primary-200: #b19cff;
+  --color-primary-300: #937be3;
+  --color-primary-400: #765cc1;
+  --color-primary-500: #5a3ea1;
+  --color-primary-600: #401f81;
+  --color-primary-700: #28005c;
+  --color-primary-800: #0f002a;
+  --color-primary-900: #010003;
+
+  --color-secondary-50: #bcffee;
+  --color-secondary-100: #2bedce;
+  --color-secondary-200: #2ac8ae;
+  --color-secondary-300: #28a58f;
+  --color-secondary-400: #068472;
+  --color-secondary-500: #0a6355;
+  --color-secondary-600: #09453a;
+  --color-secondary-700: #062822;
+  --color-secondary-800: #030e0b;
+  --color-secondary-900: #000101;
+}
+\ No newline at end of file
diff --git a/public/css/palette-oklch.css b/public/css/palette-oklch.css
new file mode 100644
index 0000000..f549b63
--- /dev/null
+++ b/public/css/palette-oklch.css
@@ -0,0 +1,23 @@
+:root {
+  --color-primary-50: oklch(95% 0.02 290);
+  --color-primary-100: oklch(85% 0.07 290);
+  --color-primary-200: oklch(75% 0.13 290);
+  --color-primary-300: oklch(65% 0.15 290);
+  --color-primary-400: oklch(55% 0.15 290);
+  --color-primary-500: oklch(45% 0.15 290);
+  --color-primary-600: oklch(35% 0.15 290);
+  --color-primary-700: oklch(25% 0.14 290);
+  --color-primary-800: oklch(15% 0.08 290);
+  --color-primary-900: oklch(5% 0.02 290);
+
+  --color-secondary-50: oklch(95% 0.07 178.02852951497042);
+  --color-secondary-100: oklch(85% 0.15 178.02852951497042);
+  --color-secondary-200: oklch(75% 0.13 178.02852951497042);
+  --color-secondary-300: oklch(65% 0.11 178.02852951497042);
+  --color-secondary-400: oklch(55% 0.1 178.02852951497042);
+  --color-secondary-500: oklch(45% 0.08 178.02852951497042);
+  --color-secondary-600: oklch(35% 0.06 178.02852951497042);
+  --color-secondary-700: oklch(25% 0.04 178.02852951497042);
+  --color-secondary-800: oklch(15% 0.02 178.02852951497042);
+  --color-secondary-900: oklch(6% 0.01 178.02852951497042);
+}
+\ No newline at end of file
diff --git a/public/main.css b/public/main.css
index 1f3cf13..7e3ae7b 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,54 +1,8 @@
 @import 'css/btn.css';
+@import 'css/palette-hex.css';
+@import 'css/palette-oklch.css' supports(color: oklch(55% 0.15 290));
 
-: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: oklch(65% 0.15 290);
-  --color-primary-400: #765cc1;
-  --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: oklch(35% 0.15 290);
-  --color-primary-700: #28005c;
-  --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);
-  
+:root {  
   --text-color: var(--color-primary-50);
   --text-highlight-color: var(--color-primary-100);
   --background-color: var(--color-primary-800);