Refactor UI to Godly-inspired dark design system with glassmorphism

[Copilot]

Introduces a Godly-inspired dark design system driven by a single design-tokens.json SSoT, then applies it globally across layout, cards, and pages.

Design Tokens (design-tokens.json)

• Backgrounds: slate-950 (#020617) page, slate-900 (#0f172a) surfaces, rgba(2,6,23,0.85) header glassmorphism
• Primary/Accent: blue-500 primary with glow, red-500 accent with glow (preserves baseball brand)
• Border radius: 12px cards, 8px buttons/inputs — standard rounded
• Effects: backdrop-blur: 12px glassmorphism, rgba(255,255,255,0.08) subtle white borders, blue/red box-shadow glows
• Spacing: Marketing density — 4rem section gaps, 1.5rem card padding
• Typography contrast: slate-50 headings on slate-950 (~18:1), slate-400 body (~7:1)

Theme (index.css + tailwind.config.js)

• Replaced light-mode CSS vars with full dark token set; removed the .dark media override (always-dark)
• Added .glass-card / .glass-card-hover utility classes to @layer components
• Exposed surface, subtle, shadow-glow-blue, shadow-glow-red, and header-bg to Tailwind

Global Layout (App.tsx)

• Root div gets dark bg-background text-foreground; the dark class activates all CSS vars

Components

• Header: fixed + backdrop-filter: blur(12px) + var(--header-bg) + var(--border) bottom border
• Card: swapped bg-card border for glass-card glass-card-hover — frosted glass with hover glow
• Footer: hardcoded gray-* classes replaced with var(--surface) / var(--border) / text-muted-foreground

HomePage

• Hero uses radial gradient (rgba(59,130,246,0.10) → rgba(239,68,68,0.05)) instead of flat gradient
• Feature cards alternate blue/red glow via inline boxShadow referencing CSS vars
• Benefits section uses var(--surface) + var(--border) panel instead of bg-gray-100/50

/* New glass-card utility — single source from design-tokens.json */
.glass-card {
  background: var(--card);               /* rgba(15,23,42,0.80) */
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);       /* rgba(255,255,255,0.08) */
  box-shadow: var(--shadow-md);
  border-radius: var(--radius);          /* 12px */
}

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.