Distinguish form field backgrounds from card surfaces

Introduce a --field design token (page background tone) used by inputs, textareas and select triggers, and raise the dark-mode card lightness so cards read as elevated surfaces with inset fields, following the shadcn convention.

src/components/forms/FieldWidget.tsx

@@ -398,7 +398,7 @@ function StringField({
             value={strValue || '#000000'}
             onChange={(e) => handleCommit(e.target.value)}
             disabled={readOnly}
-            className="h-9 w-14 cursor-pointer rounded-md border border-input bg-transparent p-1"
+            className="h-9 w-14 cursor-pointer rounded-md border border-input bg-field p-1"
           />
           <BufferedInput
             value={strValue}

src/components/ui/input.tsx

@@ -14,7 +14,7 @@ const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLI
       <input
         type={type}
         className={cn(
-          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'flex h-9 w-full rounded-md border border-input bg-field px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
           className,
         )}
         ref={ref}

src/components/ui/select.tsx

@@ -23,7 +23,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-field px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className,
     )}
     {...props}

src/components/ui/textarea.tsx

@@ -13,7 +13,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttribu
     return (
       <textarea
         className={cn(
-          'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'flex min-h-[60px] w-full rounded-md border border-input bg-field px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
           className,
         )}
         ref={ref}

src/index.css

@@ -37,6 +37,10 @@
   --input: oklch(0.922 0.007 285.823);
   --ring: oklch(0.708 0.015 285.823);
 
+  /* Form fields use the page background tone so cards read as elevated
+     surfaces (shadcn convention: inset fields on a raised card). */
+  --field: var(--background);
+
   --radius: 0.5rem;
 
   --chart-1: 220 70% 50%;
@@ -50,7 +54,7 @@
   --background: oklch(0.141 0.005 285.823);
   --foreground: oklch(0.985 0.002 285.823);
 
-  --card: oklch(0.205 0.007 285.823);
+  --card: oklch(0.235 0.008 285.823);
   --card-foreground: oklch(0.985 0.002 285.823);
 
   --popover: oklch(0.205 0.007 285.823);
@@ -77,6 +81,8 @@
   --input: oklch(0.274 0.009 285.823);
   --ring: oklch(0.553 0.013 285.823);
 
+  --field: var(--background);
+
   --chart-1: 220 70% 60%;
   --chart-2: 160 60% 55%;
   --chart-3: 30 80% 60%;
@@ -113,6 +119,7 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-field: var(--field);
 
   --color-chart-1: hsl(var(--chart-1));
   --color-chart-2: hsl(var(--chart-2));