add obsidian/mocha/deep-ocean themes (Gemini)

src/components/ThemeSwitcher.astro

@@ -6,11 +6,13 @@
     <select id="theme-select">
         <option value="">Light</option>
         <option value="cool">Cool</option>
-        <option value="warm">Warm Terracotta</option>
         <option value="midnight-garden">Midnight Garden</option>
         <option value="stormfront">Stormfront</option>
         <option value="copper-slate">Copper &amp; Slate</option>
         <option value="northern-lights">Northern Lights</option>
+        <option value="obsidian">Obsidian</option>
+        <option value="mocha">Mocha</option>
+        <option value="deep-ocean">Deep Ocean</option>
     </select>
 </div>
 

src/styles/vars.css

@@ -91,3 +91,42 @@
     --accent-color-faded: hsl(175deg 25% 42%);
     --nav-hover: hsl(175deg 20% 100% / 10%);
 }
+
+/* v10: Obsidian */
+[data-theme="obsidian"] {
+    --bg-color: hsl(0deg 0% 5%);
+    --content-color: hsl(0deg 0% 88%);
+    --content-color-faded: hsl(0deg 0% 55%);
+    --heading-color: hsl(0deg 0% 98%);
+    --primary-color: hsl(200deg 10% 40%);
+    --primary-color-faded: hsl(200deg 10% 15%);
+    --accent-color: hsl(210deg 100% 65%);
+    --accent-color-faded: hsl(210deg 30% 50%);
+    --nav-hover: hsl(0deg 0% 100% / 8%);
+}
+
+/* v11: Mocha */
+[data-theme="mocha"] {
+    --bg-color: hsl(30deg 12% 12%);
+    --content-color: hsl(35deg 15% 80%);
+    --content-color-faded: hsl(35deg 10% 55%);
+    --heading-color: hsl(40deg 30% 90%);
+    --primary-color: hsl(25deg 20% 45%);
+    --primary-color-faded: hsl(25deg 15% 20%);
+    --accent-color: hsl(15deg 65% 60%);
+    --accent-color-faded: hsl(15deg 30% 50%);
+    --nav-hover: hsl(35deg 20% 100% / 8%);
+}
+
+/* v12: Deep Ocean */
+[data-theme="deep-ocean"] {
+    --bg-color: hsl(225deg 25% 10%);
+    --content-color: hsl(220deg 15% 82%);
+    --content-color-faded: hsl(220deg 10% 60%);
+    --heading-color: hsl(220deg 25% 95%);
+    --primary-color: hsl(225deg 40% 50%);
+    --primary-color-faded: hsl(225deg 30% 18%);
+    --accent-color: hsl(330deg 75% 65%);
+    --accent-color-faded: hsl(330deg 35% 55%);
+    --nav-hover: hsl(220deg 20% 100% / 10%);
+}