Reorganise components into atoms/molecules/organisms and fix Input icon colours

Moved all 17 components from ui/ into atomic design tiers: atoms (Button,
IconButton, Input, Textarea, Select, Checkbox, Radio, Switch, Badge, Tag,
Chip, Tooltip) and molecules (Alert, Accordion, Card, Dialog, Popover).
Updated all Storybook titles and cross-component imports. Changed Input
icons to primary-dark and replaced palette token references with semantic
tokens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/atoms/Badge/Badge.tsx

@@ -0,0 +1,61 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?:
+    | 'navy'
+    | 'info'
+    | 'info-light'
+    | 'success'
+    | 'success-light'
+    | 'error'
+    | 'error-light'
+    | 'warning'
+    | 'warning-light'
+    | 'neutral'
+    | 'white'
+  leftIcon?: ReactNode
+  rightIcon?: ReactNode
+}
+
+const variantStyles: Record<string, string> = {
+  navy: 'bg-badge-navy text-white',
+  info: 'bg-badge-info text-white',
+  'info-light': 'bg-badge-info-light text-primary-dark',
+  success: 'bg-badge-success text-white',
+  'success-light': 'bg-badge-success-light text-badge-on-success-light',
+  error: 'bg-badge-error text-white',
+  'error-light': 'bg-badge-error-light text-badge-on-error-light',
+  warning: 'bg-badge-warning text-white',
+  'warning-light': 'bg-badge-warning-light text-badge-on-warning-light',
+  neutral: 'bg-badge-neutral text-text-secondary',
+  white: 'bg-surface text-primary-dark border border-primary-dark',
+}
+
+export function Badge({
+  variant = 'info',
+  leftIcon,
+  rightIcon,
+  className,
+  children,
+  ...props
+}: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex h-[30px] items-center gap-1 rounded-lg px-3 text-small font-bold leading-[19px]',
+        variantStyles[variant],
+        className,
+      )}
+      {...props}
+    >
+      {leftIcon && (
+        <span className="shrink-0 [&>svg]:size-full size-[18px]">{leftIcon}</span>
+      )}
+      {children}
+      {rightIcon && (
+        <span className="shrink-0 [&>svg]:size-full size-[18px]">{rightIcon}</span>
+      )}
+    </span>
+  )
+}