style: Update color variables in CSS and improve scenario prompts in templates

templates/consumption.html

@@ -30,11 +30,7 @@ title %}Consumption · CalMiner{% endblock %} {% block content %}
     scenario", placeholder_disabled=True ) }}
     <label for="consumption-form-unit">
       Unit
-      <select
-        id="consumption-form-unit"
-        name="unit_name"
-        required
-      >
+      <select id="consumption-form-unit" name="unit_name" required>
         <option value="" disabled selected>Select unit</option>
         {% for unit in unit_options %}
         <option value="{{ unit.name }}" data-symbol="{{ unit.symbol }}">
@@ -43,11 +39,7 @@ title %}Consumption · CalMiner{% endblock %} {% block content %}
         {% endfor %}
       </select>
     </label>
-    <input
-      id="consumption-form-unit-symbol"
-      type="hidden"
-      name="unit_symbol"
-    />
+    <input id="consumption-form-unit-symbol" type="hidden" name="unit_symbol" />
     <label for="consumption-form-amount">
       Amount
       <input
@@ -71,7 +63,7 @@ title %}Consumption · CalMiner{% endblock %} {% block content %}
   </form>
   {{ feedback("consumption-feedback") }} {% else %}
   <p class="empty-state">
-    Create a scenario before adding consumption records.
+    Create a <a href="scenarios">scenario</a> before adding consumption records.
   </p>
   {% endif %}
 </section>