From af3698458d551364f0ccd2dacf877d6fb9efcc53 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 3 Feb 2022 01:00:45 -0800
Subject: [PATCH] Add element-based color variables

---
 styles/variables.scss | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/styles/variables.scss b/styles/variables.scss
index b42d44d4..46e46b5d 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -20,6 +20,37 @@ $blue: #61B3FF;
 $red: #FF6161;
 $error: #D13A3A;
 
+// Colors: Elements
+$wind-text-dark:    #009961;
+$wind-text-light:   #1DC688;
+$wind-bg-dark:      #4CFFBF;
+$wind-bg-light:     #CDFFED;
+
+$fire-text-dark:    #990000;
+$fire-text-light:   #EC5C5C;
+$fire-bg-dark:      #FF4D4D;
+$fire-bg-light:     #FFCDCD;
+
+$water-text-dark:   #006199;
+$water-text-light:  #5CB7EC;
+$water-bg-dark:     #4DBFFF;
+$water-bg-light:    #CDEDFF;
+
+$earth-text-dark:   #994000;
+$earth-text-light:  #EC985C;
+$earth-bg-dark:     #FF974C;
+$earth-bg-light:    #FFE2CD;
+
+$light-text-dark:   #998A00;
+$light-text-light:  #C5B20C;
+$light-bg-dark:     #FFED4C;
+$light-bg-light:    #FFFACD;
+
+$dark-text-dark:    #8806B7;
+$dark-text-light:   #C65CEC;
+$dark-bg-dark:      #D14CFF;
+$dark-bg-light:     #F2CDFF;
+
 // Font weight
 $normal: 400;
 $medium: 500;