Build [v1.14.32]

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 */
@@ -97,6 +97,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
   * {
@@ -122,17 +130,22 @@
 
   /* Checkbox styling - proper, usable checkboxes */
   input[type="checkbox"] {
-    @apply w-5 h-5 cursor-pointer accent-primary border-2 border-outline;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    accent-color: var(--primary-DEFAULT);
+    border: 2px solid var(--outline);
     border-radius: 3px;
     appearance: auto;
   }
 
   input[type="checkbox"]:hover {
-    @apply border-primary;
+    border-color: var(--primary-DEFAULT);
   }
 
   input[type="checkbox"]:focus {
-    @apply ring-2 ring-primary outline-none;
+    outline: 2px solid var(--primary-DEFAULT);
+    outline-offset: 2px;
   }
 
   h1 {
@@ -170,7 +183,7 @@
     color: var(--primary-foreground);
     padding: 0.5rem 1rem;
     @apply inline-flex items-center justify-center gap-2 transition-opacity hover:opacity-90;
-    border-radius: 0 !important;
+    border-radius: 5px !important;
   }
 
   .btn-secondary {
@@ -179,7 +192,7 @@
     color: var(--secondary-DEFAULT);
     padding: 0.5rem 1rem;
     @apply inline-flex items-center justify-center gap-2 transition-colors;
-    border-radius: 0 !important;
+    border-radius: 5px !important;
   }
 
   .btn-secondary:hover {
@@ -255,6 +268,71 @@
     border-radius: 0 !important;
   }
 
+  /* ── Pill Toggle — replaces all input[type="checkbox"] ── */
+  .toggle-pill {
+    -webkit-appearance: none !important;
+    appearance: none !important;
+    width: 42px !important;
+    height: 24px !important;
+    border-radius: 999px !important;
+    background: var(--surface-bright) !important;
+    border: 1.5px solid var(--outline) !important;
+    position: relative !important;
+    cursor: pointer !important;
+    flex-shrink: 0 !important;
+    transition: background 0.22s ease, border-color 0.22s ease !important;
+    outline: none !important;
+    accent-color: transparent !important;
+  }
+
+  .toggle-pill::after {
+    content: '' !important;
+    position: absolute !important;
+    top: 3px !important;
+    left: 3px !important;
+    width: 16px !important;
+    height: 16px !important;
+    border-radius: 50% !important;
+    background: var(--secondary) !important;
+    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s !important;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
+    display: block !important;
+  }
+
+  .toggle-pill:checked {
+    background: var(--primary-DEFAULT) !important;
+    border-color: var(--primary-DEFAULT) !important;
+  }
+
+  .toggle-pill:checked::after {
+    transform: translateX(18px) !important;
+    background: var(--primary-foreground) !important;
+  }
+
+  .toggle-pill:focus-visible {
+    outline: 2px solid var(--primary-DEFAULT) !important;
+    outline-offset: 2px !important;
+  }
+
+  .toggle-pill:disabled {
+    opacity: 0.4 !important;
+    cursor: not-allowed !important;
+  }
+
+  .toggle-pill.sm {
+    width: 34px !important;
+    height: 19px !important;
+  }
+
+  .toggle-pill.sm::after {
+    width: 13px !important;
+    height: 13px !important;
+  }
+
+  .toggle-pill.sm:checked::after {
+    transform: translateX(15px) !important;
+  }
+
   .headline-lg {
     @apply text-5xl font-normal;
     letter-spacing: -0.02em;