Updating

baseball/src/app/globals.css

@@ -3,6 +3,28 @@
 @tailwind utilities;
 
 @layer base {
+  :root {
+    --background: 1 0 0;
+    --foreground: 0.145 0 0;
+    --card: 1 0 0;
+    --card-foreground: 0.145 0 0;
+    --popover: 1 0 0;
+    --popover-foreground: 0.145 0 0;
+    --primary: 0.205 0 0;
+    --primary-foreground: 0.985 0 0;
+    --secondary: 0.97 0 0;
+    --secondary-foreground: 0.205 0 0;
+    --muted: 0.97 0 0;
+    --muted-foreground: 0.556 0 0;
+    --accent: 0.97 0 0;
+    --accent-foreground: 0.205 0 0;
+    --destructive: 0.577 0.245 27.325;
+    --destructive-foreground: 0.985 0 0;
+    --border: 0.922 0 0;
+    --input: 0.922 0 0;
+    --ring: 0.708 0 0;
+  }
+
   :root {
     color-scheme: light;
   }
@@ -17,10 +39,7 @@
 
   body {
     @apply min-h-screen bg-background font-sans text-foreground antialiased;
-    background-image:
+    background-image: radial-gradient(circle at top, rgba(0, 0, 0, 0.035), transparent 32%);
-      radial-gradient(circle at top left, rgba(15, 92, 77, 0.16), transparent 28%),
-      radial-gradient(circle at top right, rgba(207, 111, 46, 0.18), transparent 24%),
-      linear-gradient(180deg, #fcfaf5 0%, #f7f1e5 50%, #f2e7d4 100%);
   }
 
   a {
@@ -30,7 +49,7 @@
 
 @layer components {
   .app-surface {
-    @apply rounded-3xl border border-white/70 bg-card/85 shadow-panel backdrop-blur;
+    @apply rounded-3xl border bg-card shadow-panel;
   }
 
   .field-label {
@@ -38,6 +57,6 @@
   }
 
   .field-select {
-    @apply flex h-11 w-full rounded-2xl border border-input bg-white/90 px-4 py-2 text-sm text-foreground shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring;
+    @apply flex h-11 w-full rounded-2xl border border-input bg-background px-4 py-2 text-sm text-foreground shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring;
   }
 }

baseball/src/components/AppShell.tsx

@@ -27,16 +27,17 @@ export function AppShell({
 
   return (
     <div className="container py-4 md:py-8">
-      <header className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,rgba(8,35,47,0.98)_0%,rgba(14,87,72,0.96)_52%,rgba(203,105,48,0.92)_100%)] p-6 text-white shadow-glow md:p-10">
+      <header className="relative overflow-hidden rounded-[2rem] border bg-primary p-6 text-primary-foreground shadow-glow md:p-10">
-        <div className="pointer-events-none absolute inset-0 bg-hero-grid bg-[size:38px_38px] opacity-20" />
+        <div className="pointer-events-none absolute inset-0 bg-hero-grid bg-[size:38px_38px] opacity-[0.08]" />
+        <div className="pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-white/10 to-transparent" />
         <div className="relative flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
           <div className="max-w-3xl">
-            <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm font-medium text-white/90 backdrop-blur">
+            <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-white/80">
               <Trophy className="h-4 w-4" />
               Little League Coach Console
             </div>
             <h1 className="font-display text-4xl font-semibold leading-none tracking-tight md:text-6xl">{title}</h1>
-            <p className="mt-4 max-w-2xl text-base text-white/80 md:text-lg">{subtitle}</p>
+            <p className="mt-4 max-w-2xl text-base text-white/70 md:text-lg">{subtitle}</p>
           </div>
           {actions ? <div className="relative flex items-start">{actions}</div> : null}
         </div>
@@ -53,8 +54,8 @@ export function AppShell({
               className={cn(
                 "inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition",
                 active
-                  ? "bg-white text-foreground shadow-panel"
+                  ? "bg-primary text-primary-foreground shadow-panel"
-                  : "text-muted-foreground hover:bg-white/80 hover:text-foreground"
+                  : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
               )}
             >
               <Icon className="h-4 w-4" />

baseball/tailwind.config.ts

@@ -12,34 +12,34 @@ const config: Config = {
     },
     extend: {
       colors: {
-        border: "hsl(32 22% 86%)",
+        border: "oklch(var(--border))",
-        input: "hsl(32 22% 86%)",
+        input: "oklch(var(--input))",
-        ring: "hsl(157 63% 27%)",
+        ring: "oklch(var(--ring))",
-        background: "hsl(42 43% 96%)",
+        background: "oklch(var(--background))",
-        foreground: "hsl(205 32% 12%)",
+        foreground: "oklch(var(--foreground))",
         primary: {
-          DEFAULT: "hsl(157 63% 27%)",
+          DEFAULT: "oklch(var(--primary))",
-          foreground: "hsl(48 100% 98%)"
+          foreground: "oklch(var(--primary-foreground))"
         },
         secondary: {
-          DEFAULT: "hsl(25 69% 54%)",
+          DEFAULT: "oklch(var(--secondary))",
-          foreground: "hsl(48 100% 98%)"
+          foreground: "oklch(var(--secondary-foreground))"
         },
         muted: {
-          DEFAULT: "hsl(36 28% 92%)",
+          DEFAULT: "oklch(var(--muted))",
-          foreground: "hsl(211 15% 42%)"
+          foreground: "oklch(var(--muted-foreground))"
         },
         accent: {
-          DEFAULT: "hsl(194 52% 18%)",
+          DEFAULT: "oklch(var(--accent))",
-          foreground: "hsl(48 100% 98%)"
+          foreground: "oklch(var(--accent-foreground))"
         },
         card: {
-          DEFAULT: "hsl(48 100% 99%)",
+          DEFAULT: "oklch(var(--card))",
-          foreground: "hsl(205 32% 12%)"
+          foreground: "oklch(var(--card-foreground))"
         },
         destructive: {
-          DEFAULT: "hsl(6 72% 54%)",
+          DEFAULT: "oklch(var(--destructive))",
-          foreground: "hsl(48 100% 98%)"
+          foreground: "oklch(var(--destructive-foreground))"
         }
       },
       borderRadius: {
@@ -48,8 +48,8 @@ const config: Config = {
         "3xl": "2rem"
       },
       boxShadow: {
-        glow: "0 24px 80px rgba(13, 52, 63, 0.15)",
+        glow: "0 24px 80px rgba(0, 0, 0, 0.18)",
-        panel: "0 10px 30px rgba(23, 34, 45, 0.08)"
+        panel: "0 8px 24px rgba(0, 0, 0, 0.06)"
       },
       fontFamily: {
         sans: ['"Inter"', '"Segoe UI"', "sans-serif"],