Configurable theme, change default to blue

index.html

@@ -5,12 +5,33 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Kaboot</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              theme: {
+                primary: 'var(--theme-primary)',
+                'primary-dark': 'var(--theme-primary-dark)',
+                hover: 'var(--theme-hover-bg)',
+              }
+            }
+          }
+        }
+      }
+    </script>
     <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;600;700&family=Montserrat:wght@400;700;900&display=swap" rel="stylesheet">
     <style>
+      :root {
+        --theme-primary: #2563eb;
+        --theme-primary-dark: #1e40af;
+        --theme-primary-darker: #1e3a5f;
+        --theme-hover-bg: #eff6ff;
+      }
+      
       body {
         font-family: 'Montserrat', sans-serif;
-        /* Richer purple gradient */
-        background: linear-gradient(180deg, #46178f 0%, #25094f 100%);
+        background: linear-gradient(180deg, var(--theme-primary) 0%, var(--theme-primary-darker) 100%);
         color: white;
         overflow-x: hidden;
         min-height: 100vh;