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/molecules/Card/Card.tsx

@@ -0,0 +1,102 @@
+import { forwardRef, type HTMLAttributes } from 'react'
+import { cn } from '@/lib/utils'
+
+// --- Card ---
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'surface' | 'outlined' | 'elevated' | 'filled'
+}
+
+const variantStyles: Record<string, string> = {
+  surface: 'bg-surface border border-border shadow-default',
+  outlined: 'bg-surface border border-border',
+  elevated: 'bg-surface shadow-md',
+  filled: 'bg-primary-dark text-white',
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ variant = 'surface', className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('rounded-xl', variantStyles[variant], className)}
+      {...props}
+    />
+  ),
+)
+Card.displayName = 'Card'
+
+// --- CardHeader ---
+
+export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  action?: React.ReactNode
+}
+
+export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
+  ({ action, className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex items-start gap-3 px-6 pt-6', action && 'justify-between', className)}
+      {...props}
+    >
+      <div className="flex min-w-0 flex-1 flex-col gap-1">{children}</div>
+      {action && <div className="shrink-0">{action}</div>}
+    </div>
+  ),
+)
+CardHeader.displayName = 'CardHeader'
+
+// --- CardTitle ---
+
+export type CardTitleProps = HTMLAttributes<HTMLHeadingElement>
+
+export const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-h5 font-bold leading-tight', className)}
+      {...props}
+    />
+  ),
+)
+CardTitle.displayName = 'CardTitle'
+
+// --- CardDescription ---
+
+export type CardDescriptionProps = HTMLAttributes<HTMLParagraphElement>
+
+export const CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={cn('text-small text-text-secondary', className)}
+      {...props}
+    />
+  ),
+)
+CardDescription.displayName = 'CardDescription'
+
+// --- CardContent ---
+
+export type CardContentProps = HTMLAttributes<HTMLDivElement>
+
+export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('px-6 py-4', className)} {...props} />
+  ),
+)
+CardContent.displayName = 'CardContent'
+
+// --- CardFooter ---
+
+export type CardFooterProps = HTMLAttributes<HTMLDivElement>
+
+export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex items-center gap-3 px-6 pb-6', className)}
+      {...props}
+    />
+  ),
+)
+CardFooter.displayName = 'CardFooter'