chore: tweak form style

web/src/components/ui/dialog.tsx

@@ -77,7 +77,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content ref={ref} className={cn(dialogContentVariants({ size }), className)} {...props}>
       {children}
       {showCloseButton && (
-        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+        <DialogPrimitive.Close className="ring-offset-background data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
           <XIcon />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>

web/src/components/ui/sheet.tsx

@@ -75,7 +75,7 @@ const SheetContent = React.forwardRef<
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-60 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+        <SheetPrimitive.Close className="ring-offset-background data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-60 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
           <XIcon className="size-5" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>

web/src/index.css

@@ -12,7 +12,7 @@
 
 @layer base {
   * {
-    @apply border-border outline-ring/50;
+    @apply border-border outline-none ring-0;
   }
   body {
     @apply bg-background text-foreground;

web/src/themes/COLOR_GUIDE.md

@@ -83,14 +83,12 @@ The color system supports both light and dark themes automatically through CSS c
 | `--accent-foreground` | Dark gray    | Light gray  | Text on accent backgrounds   |
 | `--border`            | Medium light | Medium dark | Dividers, input borders      |
 | `--input`             | Medium light | Medium dark | Form input backgrounds       |
-| `--ring`              | Blue         | Blue        | Focus outlines               |
 
 **When to use:**
 
 - Hover states (`--accent`)
 - Form field borders (`--border`)
 - Input field backgrounds (`--input`)
-- Focus indicators (`--ring`)
 
 ### ⚠️ Feedback Colors
 
@@ -134,7 +132,6 @@ The color system supports both light and dark themes automatically through CSS c
 | `--sidebar-accent`             | Sidebar hover states         |
 | `--sidebar-accent-foreground`  | Text on sidebar hover states |
 | `--sidebar-border`             | Sidebar dividers             |
-| `--sidebar-ring`               | Sidebar focus indicators     |
 
 ## Best Practices
 
@@ -149,7 +146,6 @@ The color system supports both light and dark themes automatically through CSS c
    ```
 
 2. **Use semantic meaning:**
-
    - Primary = main actions
    - Secondary = supporting actions
    - Destructive = dangerous/delete actions
@@ -170,7 +166,6 @@ The color system supports both light and dark themes automatically through CSS c
    ```
 
 2. **Don't use colors outside their intended purpose:**
-
    - Don't use destructive colors for positive actions
    - Don't use primary colors for secondary elements
 
@@ -196,7 +191,6 @@ document.documentElement.classList.toggle("dark");
 ## Accessibility
 
 - All color pairs meet WCAG contrast requirements
-- Focus indicators use `--ring` for consistency
 - Color is never the only means of conveying information
 
 ## Implementation Examples
@@ -235,10 +229,6 @@ document.documentElement.classList.toggle("dark");
   color: var(--foreground);
   border: 1px solid var(--border);
 }
-
-.input:focus {
-  outline: 2px solid var(--ring);
-}
 ```
 
 ### Cards and Containers