overhaul: migrated to tailwind css for css management, consolidated custom css, removed inline css, removed unneeded css, and otherwise improved page styling

tailwind.config.js

@@ -0,0 +1,55 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./code/web/templates/**/*.html",
+    "./code/web/static/**/*.js",
+    "./code/web/static/**/*.ts",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // MTG color identity colors
+        'mtg-white': '#F8F6D8',
+        'mtg-blue': '#0E68AB',
+        'mtg-black': '#150B00',
+        'mtg-red': '#D3202A',
+        'mtg-green': '#00733E',
+        
+        // Theme colors (match existing CSS variables)
+        'bg-primary': 'var(--bg-primary)',
+        'bg-secondary': 'var(--bg-secondary)',
+        'bg-tertiary': 'var(--bg-tertiary)',
+        'text-primary': 'var(--text-primary)',
+        'text-secondary': 'var(--text-secondary)',
+        'border-color': 'var(--border-color)',
+        'accent-primary': 'var(--accent-primary)',
+        'accent-secondary': 'var(--accent-secondary)',
+        'panel-bg': 'var(--panel-bg)',
+        'panel-border': 'var(--panel-border)',
+        
+        // Button colors
+        'btn-forward': '#3b82f6', // blue
+        'btn-backward': '#6b7280', // gray
+      },
+      spacing: {
+        // Card image sizes
+        'card-prominent': '360px',
+        'card-list': '160px',
+      },
+      zIndex: {
+        // Z-index stacking system
+        'base': '0',
+        'dropdown': '10',
+        'sticky': '20',
+        'modal-backdrop': '40',
+        'modal': '50',
+        'toast': '60',
+        'tooltip': '70',
+      },
+    },
+    screens: {
+      'mobile-max': {'max': '900px'},
+    },
+  },
+  plugins: [],
+}