Refine root UI around shadcn primitives

app/globals.css

@@ -3,23 +3,23 @@
 @tailwind utilities;
 
 :root {
-  --background: 210 20% 98%;
-  --foreground: 222 30% 12%;
+  --background: 0 0% 100%;
+  --foreground: 224 71.4% 4.1%;
 
   --card: 0 0% 100%;
-  --card-foreground: 222 30% 12%;
+  --card-foreground: 224 71.4% 4.1%;
   --popover: 0 0% 100%;
-  --popover-foreground: 222 30% 12%;
+  --popover-foreground: 224 71.4% 4.1%;
 
-  --primary: 214 84% 42%;
+  --primary: 222.2 47.4% 11.2%;
   --primary-foreground: 210 40% 98%;
-  --secondary: 210 24% 94%;
-  --secondary-foreground: 222 30% 12%;
-  --muted: 210 20% 95%;
-  --muted-foreground: 215 16% 38%;
-  --accent: 191 78% 42%;
-  --accent-foreground: 210 40% 98%;
-  --destructive: 0 72% 47%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
   --destructive-foreground: 210 40% 98%;
 
   --surface-1: 0 0% 100%;
@@ -28,10 +28,10 @@
   --surface-inverse: 222 34% 14%;
   --surface-inverse-foreground: 210 40% 98%;
 
-  --border: 214 22% 88%;
-  --border-strong: 214 20% 80%;
-  --input: 214 20% 84%;
-  --ring: 214 84% 42%;
+  --border: 214.3 31.8% 91.4%;
+  --border-strong: 214.3 31.8% 85%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
 
   --status-success: 145 63% 42%;
   --status-success-soft: 145 58% 92%;
@@ -40,20 +40,20 @@
 
   --brand-primary: 214 84% 42%;
   --brand-secondary: 191 78% 42%;
-  --ambient-primary-alpha: 0.18;
-  --ambient-secondary-alpha: 0.14;
-  --ambient-grid-alpha: 0.4;
+  --ambient-primary-alpha: 0.08;
+  --ambient-secondary-alpha: 0.06;
+  --ambient-grid-alpha: 0;
 
   --radius-surface: 0rem;
   --radius-nested: 0rem;
-  --radius-pill: 9999px;
+  --radius-pill: 0px;
 
   --shadow-xs: 0 1px 2px hsl(220 26% 18% / 0.05);
-  --shadow-sm: 0 12px 30px -20px hsl(220 32% 18% / 0.16);
-  --shadow-md: 0 22px 48px -28px hsl(220 32% 18% / 0.2);
-  --shadow-lg: 0 28px 70px -34px hsl(220 32% 18% / 0.28);
-  --shadow-card: 0 20px 46px -30px hsl(220 32% 18% / 0.2);
-  --shadow-panel: 0 18px 50px -32px hsl(220 32% 18% / 0.18);
+  --shadow-sm: 0 1px 3px hsl(220 26% 18% / 0.1), 0 1px 2px -1px hsl(220 26% 18% / 0.1);
+  --shadow-md: 0 4px 6px -1px hsl(220 26% 18% / 0.1), 0 2px 4px -2px hsl(220 26% 18% / 0.1);
+  --shadow-lg: 0 10px 15px -3px hsl(220 26% 18% / 0.12), 0 4px 6px -4px hsl(220 26% 18% / 0.12);
+  --shadow-card: 0 1px 3px hsl(220 26% 18% / 0.1), 0 1px 2px -1px hsl(220 26% 18% / 0.08);
+  --shadow-panel: 0 4px 6px -1px hsl(220 26% 18% / 0.1), 0 2px 4px -2px hsl(220 26% 18% / 0.08);
   --shadow-sidebar: inset 0 1px 0 hsl(0 0% 100% / 0.7);
 
   --focus-ring: 0 0 0 3px hsl(var(--ring) / 0.18);
@@ -77,23 +77,23 @@
 }
 
 .dark {
-  --background: 222 33% 8%;
-  --foreground: 210 25% 92%;
+  --background: 224 71.4% 4.1%;
+  --foreground: 210 20% 98%;
 
-  --card: 222 28% 11%;
-  --card-foreground: 210 25% 92%;
-  --popover: 222 28% 11%;
-  --popover-foreground: 210 25% 92%;
+  --card: 224 71.4% 4.1%;
+  --card-foreground: 210 20% 98%;
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
 
-  --primary: 205 88% 64%;
-  --primary-foreground: 222 33% 8%;
-  --secondary: 222 18% 18%;
-  --secondary-foreground: 210 25% 92%;
-  --muted: 222 18% 16%;
-  --muted-foreground: 215 16% 72%;
-  --accent: 190 76% 57%;
-  --accent-foreground: 222 33% 8%;
-  --destructive: 0 72% 58%;
+  --primary: 210 20% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 215 27.9% 16.9%;
+  --secondary-foreground: 210 20% 98%;
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+  --accent: 215 27.9% 16.9%;
+  --accent-foreground: 210 20% 98%;
+  --destructive: 0 62.8% 30.6%;
   --destructive-foreground: 210 40% 98%;
 
   --surface-1: 222 28% 11%;
@@ -102,10 +102,10 @@
   --surface-inverse: 210 40% 98%;
   --surface-inverse-foreground: 222 33% 8%;
 
-  --border: 221 18% 21%;
-  --border-strong: 221 18% 28%;
-  --input: 221 18% 26%;
-  --ring: 205 88% 64%;
+  --border: 215 27.9% 16.9%;
+  --border-strong: 215 20.2% 25%;
+  --input: 215 27.9% 16.9%;
+  --ring: 216 12.2% 83.9%;
 
   --status-success: 145 68% 66%;
   --status-success-soft: 145 36% 18%;
@@ -114,16 +114,16 @@
 
   --brand-primary: 205 88% 64%;
   --brand-secondary: 190 76% 57%;
-  --ambient-primary-alpha: 0.22;
-  --ambient-secondary-alpha: 0.18;
-  --ambient-grid-alpha: 0.32;
+  --ambient-primary-alpha: 0.08;
+  --ambient-secondary-alpha: 0.06;
+  --ambient-grid-alpha: 0;
 
-  --shadow-xs: 0 1px 2px hsl(220 50% 2% / 0.42);
-  --shadow-sm: 0 14px 30px -20px hsl(220 50% 2% / 0.48);
-  --shadow-md: 0 24px 48px -28px hsl(220 50% 2% / 0.58);
-  --shadow-lg: 0 34px 78px -34px hsl(220 50% 2% / 0.72);
-  --shadow-card: 0 20px 52px -28px hsl(220 50% 2% / 0.55);
-  --shadow-panel: 0 22px 56px -32px hsl(220 50% 2% / 0.52);
+  --shadow-xs: 0 1px 2px hsl(220 50% 2% / 0.32);
+  --shadow-sm: 0 1px 3px hsl(220 50% 2% / 0.28), 0 1px 2px -1px hsl(220 50% 2% / 0.28);
+  --shadow-md: 0 4px 6px -1px hsl(220 50% 2% / 0.32), 0 2px 4px -2px hsl(220 50% 2% / 0.32);
+  --shadow-lg: 0 10px 15px -3px hsl(220 50% 2% / 0.36), 0 4px 6px -4px hsl(220 50% 2% / 0.36);
+  --shadow-card: 0 1px 3px hsl(220 50% 2% / 0.28), 0 1px 2px -1px hsl(220 50% 2% / 0.28);
+  --shadow-panel: 0 4px 6px -1px hsl(220 50% 2% / 0.32), 0 2px 4px -2px hsl(220 50% 2% / 0.32);
   --shadow-sidebar: inset 0 1px 0 hsl(210 25% 92% / 0.06);
 
   --sidebar-background: 222 25% 10%;
@@ -153,22 +153,7 @@ html.dark {
   body {
     @apply min-h-screen text-foreground antialiased;
     background-color: hsl(var(--background));
-    background-image:
-      radial-gradient(
-        circle at top,
-        hsl(var(--brand-primary) / var(--ambient-primary-alpha)),
-        transparent 34%
-      ),
-      radial-gradient(
-        circle at bottom right,
-        hsl(var(--brand-secondary) / var(--ambient-secondary-alpha)),
-        transparent 30%
-      ),
-      linear-gradient(hsl(var(--border) / var(--ambient-grid-alpha)) 1px, transparent 1px),
-      linear-gradient(90deg, hsl(var(--border) / var(--ambient-grid-alpha)) 1px, transparent 1px);
-    background-size: auto, auto, 24px 24px, 24px 24px;
-    background-position: center top, right bottom, center center, center center;
-    background-attachment: fixed;
+    background-image: none;
   }
 
   a {