4 files changed, 75 insertions, 0 deletions
diff --git a/public/css/variables/colours.css b/public/css/variables/colours.css
new file mode 100644
index 0000000..c045cb3
--- /dev/null
+++ b/public/css/variables/colours.css
@@ -0,0 +1,28 @@
+@import 'palette-hex.css';
+@import 'palette-oklch.css' supports(color: oklch(55% 0.15 290));
+
+:root {
+  --text-color: var(--color-primary-50);
+  --text-highlight-color: var(--color-primary-100);
+  --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);
+}
+
+:is(main, article) {
+  --text-color: var(--color-primary-900);
+  --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);
+}
+
+:is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) {
+    --background-color: var(--color-primary-100);
+}
+\ No newline at end of file
diff --git a/public/css/variables/index.css b/public/css/variables/index.css
new file mode 100644
index 0000000..91bea00
--- /dev/null
+++ b/public/css/variables/index.css
@@ -0,0 +1 @@
+@import 'colours.css';
+\ No newline at end of file
diff --git a/public/css/variables/palette-hex.css b/public/css/variables/palette-hex.css
new file mode 100644
index 0000000..13a9d7c
--- /dev/null
+++ b/public/css/variables/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/variables/palette-oklch.css b/public/css/variables/palette-oklch.css
new file mode 100644
index 0000000..f549b63
--- /dev/null
+++ b/public/css/variables/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