# To AI Agent: Implement Unified Dual-Theme System (Light & Dark) for Yotrip App

## 1. Context & Design System Overview
We are building a robust, high-contrast, yet eye-friendly dual-theme system (Light and Dark modes) for our mobile application (`yotrip.labz.io.vn`). 
- **Dark Theme Constraint:** Must use the pre-configured smoky grape base (`Vintage Grape` & `Dusty Grape`) with vivid lime/aquatic accents. No pitch-black.
- **Light Theme Constraint:** Must use the soft parchment base (`Parchment`) to eliminate screen glare, using deep academic blue (`Yale Blue`) for high-contrast readability. No pure blazing white backgrounds.

---

## 2. Comprehensive Color Token Mapping

### A. LIGHT THEME PALETTE ("Classic Heritage & Soft Sand")
- **`Parchment` (`#f6f0ed`):** Map to **Global Page Backgrounds**. A warm, ancient-manuscript off-white that eliminates mobile screen glare.
- **`Yale Blue` (`#28536b`):** Map to **Primary Text, Main Titles, and Primary Action Buttons**. Provides dependable trust and sharp contrast.
- **`Steel Blue` (`#7ea8be`):** Map to **Active Navigation Tabs, Active Icons, and Secondary Actions**. 
- **`Khaki Beige` (`#bbb193`):** Map to **Borders, Dividers, and Deactivated/Muted States**.
- **`Rosy Taupe` (`#c2948a`):** Map to **Special Highlight Badges, Notification Banners, or Warm Accent Elements**.

### B. DARK THEME PALETTE ("Vintage Velvet & Aquatic Zest")
- **`Vintage Grape` (`#513b56`):** Map to **Global Page Backgrounds**.
- **`Dusty Grape` (`#525174`):** Map to **Component Surfaces (Cards, Chat Bubbles, Accordion Rows)**.
- **`Lime Cream` (`#bce784`):** Map to **Brand Text Highlights, Active Icons**.
- **`Bondi Blue` (`#348aa7`):** Map to **Primary Action Buttons, Links**.
- **`Emerald` (`#5dd39e`):** Map to **Success Utilities & "Tối ưu" badges**.

---

## 3. Technical Global Configuration

### Option A: Clean CSS Variables (`global.css`)
Replace or update the root variable tokens inside your main stylesheet:

```css
/* --- THEME SÁNG (Mềm mại, Tương phản cao, Không chói) --- */
:root {
  --background: #f6f0ed;       /* Parchment */
  --surface: #ffffff;          /* Pure White for crisp card layers */
  --surface-muted: #bbb193;    /* Khaki Beige */
  
  --border: #bbb193;           /* Khaki Beige */
  
  --text-primary: #28536b;     /* Yale Blue (High contrast text) */
  --text-secondary: #7ea8be;   /* Steel Blue */
  --text-accent: #c2948a;      /* Rosy Taupe */
  
  --primary: #28536b;          /* Yale Blue for main buttons */
  --primary-hover: #1f4154;
  --secondary-active: #7ea8be; /* Steel Blue */
}

/* --- THEME TỐI (Dịu mắt, Sang trọng, Không đen kịt) --- */
:root.dark {
  --background: #513b56;       /* Vintage Grape */
  --surface: #525174;          /* Dusty Grape */
  --surface-muted: #626186;
  
  --border: #626186;
  
  --text-primary: #f8fafc;     /* Soft White */
  --text-secondary: #94a3b8;   /* Muted Slate */
  --text-brand: #bce784;       /* Lime Cream */
  
  --primary: #348aa7;          /* Bondi Blue */
  --primary-hover: #296f86;
  --success-accent: #5dd39e;   /* Emerald */
}

### Option B: Tailwind Extension Configuration (tailwind.config.js)
Expose these custom design tokens cleanly into the utility library framework:

theme: {
  extend: {
    colors: {
      yotripLight: {
        bg: '#f6f0ed',       // Parchment
        text: '#28536b',     // Yale Blue
        steel: '#7ea8be',    // Steel Blue
        khaki: '#bbb193',    // Khaki Beige
        rosy: '#c2948a',     // Rosy Taupe
      },
      yotripDark: {
        bg: '#513b56',       // Vintage Grape
        surface: '#525174',  // Dusty Grape
        lime: '#bce784',     // Lime Cream
        bondi: '#348aa7',    // Bondi Blue
        emerald: '#5dd39e',  // Emerald
      }
    }
  }
}

## 4. UI Component Application Reference
Apply these unified color classes to ensure the interface flips seamlessly:

Chat Wrapper & Itinerary Timelines: - Light Mode: Background is yotripLight-bg, General Text is yotripLight-text.

Dark Mode: Background is yotripDark-bg, General Text is #f8fafc.

Navigation Tabs Menu:

Light Mode: Inactive text is yotripLight-steel. Active tab gets a yotripLight-text highlight indicator.

Dark Mode: Inactive text is yotripDark-surface. Active tab gets a yotripDark-lime highlight indicator.

Main Action Call-To-Actions (e.g., "Thêm địa điểm"):

Light Mode: Background is yotripLight-text (Yale Blue) with clean white text.

Dark Mode: Background is yotripDark-bondi (Bondi Blue) with clean white text.

## 5. Acceptance Criteria for Verification
[ ] Ensure that toggling the .dark class on the <html> root triggers a global transition without style flashes (transition-colors duration-200).

[ ] Text legibility inside Light Mode satisfies standard WCAG accessibility contrast limits on mobile displays out in the sun.

[ ] The background of the expanded folder nodes/chat bubbles maps cleanly to their respective surface tokens across both system states.