# Design System: Glassmorphism Overhaul

## Core Philosophy
*   **Light & Airy:** Use a pastel mesh gradient background to provide depth.
*   **Glass Surfaces:** Content resides on semi-transparent, blurred layers (`backdrop-filter`).
*   **Soft Borders:** 1px white borders with low opacity to define edges without harsh lines.
*   **Floating Depth:** Use shadows to lift elements off the background.

## Color Palette
*   **Background:** Linear Gradient (Top-Left to Bottom-Right)
    *   From: `indigo-100` (#e0e7ff)
    *   Via: `purple-100` (#f3e8ff)
    *   To: `pink-100` (#fce7f3)
*   **Surface (Glass):**
    *   Background: `rgba(255, 255, 255, 0.7)`
    *   Border: `rgba(255, 255, 255, 0.5)`
*   **Text:**
    *   Primary: `gray-900`
    *   Secondary: `gray-600`
    *   Accent: `indigo-600`

## Components

### Base
*   **Body:** `bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 min-h-screen`

### Cards (`.card`)
*   **Style:**
    *   `bg-white/70` (70% opacity white)
    *   `backdrop-blur-lg` (Large blur)
    *   `border border-white/50`
    *   `shadow-xl`
    *   `rounded-2xl` (More rounded than before)

### Navigation (`.tab-button`)
*   **Active State:**
    *   Instead of a bottom border, use a "pill" background.
    *   `bg-white/50`
    *   `shadow-sm`
    *   `text-indigo-700`
    *   `rounded-lg`

### Typography
*   **Font:** Inter (Existing)
*   **Headings:** Dark Gray (`gray-900`), slightly tighter tracking.