Fix checkbox styling: make them properly visible and usable

- Increased size from w-4 h-4 (16px) to w-5 h-5 (20px)
- Changed rounded (border-radius: 100%) to rounded-sm (3px) for proper checkbox appearance
- Added border-2 border-outline for visible checkbox border
- Added hover state with primary color border
- Added focus state with ring for keyboard accessibility
- Used appearance: auto to use native checkbox rendering
- Fixes issue where checkboxes appeared as small dots instead of proper checkboxes

frontend/app/globals.css

@@ -5,7 +5,7 @@
 @tailwind utilities;
 
 @layer base {
-        :root {
+                            :root {
     /* Base colors from DESIGN.md - AUTO-GENERATED from colors.mjs */
 
     /* Base colors from DESIGN.md */
@@ -89,6 +89,16 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
   * {
     @apply border-border;
     border-radius: 0 !important;
@@ -110,6 +120,21 @@
     font-style: normal !important;
   }
 
+  /* Checkbox styling - proper, usable checkboxes */
+  input[type="checkbox"] {
+    @apply w-5 h-5 cursor-pointer accent-primary border-2 border-outline;
+    border-radius: 3px;
+    appearance: auto;
+  }
+
+  input[type="checkbox"]:hover {
+    @apply border-primary;
+  }
+
+  input[type="checkbox"]:focus {
+    @apply ring-2 ring-primary outline-none;
+  }
+
   h1 {
     @apply text-5xl tracking-tighter;
     letter-spacing: -0.02em;