:root {
    --font-sans: "Be Vietnam Pro","Be Vietnam Pro Fallback";
    --radius-md: 10px;
    --radius-sm: 5px;
    --border: 1px solid var(--border-default);
    --yellow-light: #CFB53B;
    --red-light: #ff5f56;
    --gray-light: #636363;
    --green-light: #3fb950;
    --purple-light: #a371f7;
}

/* Khi người dùng chọn Mode */
[data-theme="white"] {
    --color-slate-700: lab(26.9569% -1.47016 -15.6993);
    --bg-primary: rgba(229, 229, 209, 1);
    --bg-secondary: rgba(235, 235, 218, 1);
    --bg-third: rgba(240, 240, 225, 1);
    --border-default: 1px solid rgba(52, 125, 57, 0.35);
    --main-text: lab(26.8019% 1.35387 -4.68303);
    --header-text: lab(60.48% -50.24 32.54);
    --card-shadow: rgba(52, 125, 57, 0.2) 0px 0px 5px 0px, rgba(52, 125, 57, 0.2) 0px 0px 1px 0px;
    --search-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    --border-bottom: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

[data-theme="black"] {
    --color-slate-700: lab(75% -1.47 -15.7);
    --bg-primary: rgba(18, 20, 18, 1);    /* Nền chính tối */
    --bg-secondary: rgba(25, 28, 25, 1);  /* Nền phụ (Sidebar/Menu) */
    --bg-third: rgba(35, 40, 35, 1);      /* Nền item khi nổi bật hoặc hover */
    --border-default: 1px solid rgba(63, 185, 80, 0.25);
    --main-text: #d1d1b8;   /* Màu xám ngà nhẹ (dễ đọc, không gây mỏi mắt) */
    --header-text: #56d364; /* Màu xanh mint sáng rõ bạn đã chọn */
    --card-shadow: rgba(0, 0, 0, 0.6) 0px 4px 12px, rgba(63, 185, 80, 0.12) 0px 0px 8px 0px;
    --search-shadow: rgba(0, 0, 0, 0.4) 0px 2px 5px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px;
    --border-bottom: rgba(0, 0, 0, 0.5) 0px 10px 10px -10px;
}

[data-theme="red"] {
    /* Backgrounds: Đen than củi pha chút tím tối (Làm nền cho đỏ rực lên) */
    --bg-primary: rgba(18, 14, 14, 1);     /* Đen sâu hơn, lạnh hơn */
    --bg-secondary: rgba(28, 20, 20, 1);   /* Sidebar xám đỏ tối */
    --bg-third: rgba(45, 25, 25, 1);       /* Hover có ánh đỏ rõ rệt */

    /* Borders: Đỏ rực rỡ, tạo khung hình sắc sảo */
    --border-default: 1px solid rgba(255, 48, 48, 0.4); 

    /* Text Colors: Tương phản cực cao giữa Lửa và Giấy cũ */
    --main-text: #f2eadd;       /* Màu giấy xuyến chỉ (sáng và thanh thoát) */
    --header-text: #ff3030;     /* Đỏ Chu Sa (Vibrant Red) - Cực tươi và mạnh */
    --color-slate-700: #c2b5a3; /* Màu cát cổ (Antique Sand) cho placeholder */

    /* Shadows: Đổ bóng ánh lửa (Glow rực rỡ) */
    --card-shadow: rgba(0, 0, 0, 0.6) 0px 4px 18px, rgba(255, 48, 48, 0.25) 0px 0px 12px 0px;
    
    /* Search & Bottom Shadow */
    --search-shadow: rgba(0, 0, 0, 0.3) 0px 2px 8px 0px, rgba(255, 48, 48, 0.3) 0px 0px 0px 1px;
    --border-bottom: rgba(255, 48, 48, 0.15) 0px 10px 10px -10px;
}

[data-theme="jade"] { 
    /* Backgrounds: Chuyển sang tông xanh lục rực rỡ hơn, bớt sắc xám đục */
    --bg-primary: rgba(40, 70, 60, 1);     /* Xanh lục bảo đậm tươi */
    --bg-secondary: rgba(50, 85, 72, 1);   /* Sidebar xanh rõ rệt, bắt mắt */
    --bg-third: rgba(65, 105, 90, 1);      /* Hover bừng sáng màu ngọc */

    /* Borders: Xanh Mint cực tươi để tạo độ sắc sảo */
    --border-default: 1px solid rgba(86, 211, 100, 0.6); 

    /* Text Colors: Trắng tinh khôi và Xanh Mint nguyên bản */
    --main-text: #ffffff;       /* Trắng tinh (nổi bật hoàn hảo trên nền xanh tươi) */
    --header-text: #56d364;     /* Màu xanh mint sáng rõ bạn đã chọn */
    --color-slate-700: #c2e0d4; /* Màu xám ngọc bạc rất sáng cho placeholder */

    /* Shadows: Đổ bóng ánh lục rực rỡ hơn */
    --card-shadow: rgba(0, 0, 0, 0.2) 0px 4px 15px, rgba(86, 211, 100, 0.3) 0px 0px 12px 0px;
    
    /* Search & Bottom Shadow */
    --search-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px 0px, rgba(86, 211, 100, 0.4) 0px 0px 0px 1px;
    --border-bottom: rgba(86, 211, 100, 0.3) 0px 10px 10px -10px;
}

[data-theme="emerald"] {
    /* Backgrounds: Xanh lục bảo pha đêm (Sâu và trong, không bị đục) */
    --bg-primary: rgba(10, 30, 28, 1);    /* Xanh đá quý tối sâu */
    --bg-secondary: rgba(16, 42, 39, 1);  /* Sidebar sắc nét */
    --bg-third: rgba(26, 68, 62, 1);      /* Hover xanh ngọc bừng sáng */

    /* Borders: Xanh ngọc lam (Cyan-Emerald) tạo độ cháy */
    --border-default: 1px solid rgba(0, 255, 204, 0.3); 

    /* Text Colors: Tương phản cực mạnh giữa lạnh và nóng */
    --main-text: #e0f2f1;       /* Trắng xanh (như băng) */
    --header-text: #00ffcc;     /* Xanh ngọc Neon (Cực tươi và lạ) */
    --color-slate-700: #80cbc4; /* Màu teal nhạt cho placeholder */

    /* Shadows: Đổ bóng ánh ngọc (Glow hiệu ứng kim cương) */
    --card-shadow: rgba(0, 0, 0, 0.5) 0px 4px 15px, rgba(0, 255, 204, 0.15) 0px 0px 12px 0px;
    
    /* Search & Bottom Shadow */
    --search-shadow: rgba(0, 0, 0, 0.3) 0px 2px 8px 0px, rgba(0, 255, 204, 0.2) 0px 0px 0px 1px;
    --border-bottom: rgba(0, 20, 18, 0.8) 0px 10px 10px -10px;
}

[data-theme="moutain-red"] {
    /* Backgrounds: Màu đen của đá núi lửa pha chút tím than (Deep Charcoal) */
    --bg-primary: rgba(15, 12, 15, 1);     /* Đen sâu thẳm */
    --bg-secondary: rgba(22, 18, 22, 1);   /* Sidebar xám tím đen */
    --bg-third: rgba(35, 25, 35, 1);       /* Hover sắc tím mận cực tối */

    /* Borders: Màu đỏ máu hoặc đỏ rượu vang mờ ảo */
    --border-default: 1px solid rgba(184, 45, 45, 0.25); 

    /* Text Colors: Sự kết hợp giữa Giấy Cũ và Lửa */
    --main-text: #e8dec9;       /* Màu giấy cổ (Parchment) - rất dễ đọc */
    --header-text: #ff4d4d;     /* Đỏ rực rỡ (tươi và sắc nét, không bị xỉn) */
    --color-slate-700: #a89f91; /* Màu bụi thời gian (Dusty Gold) cho placeholder */

    /* Shadows: Đổ bóng ánh đỏ tà dương */
    --card-shadow: rgba(0, 0, 0, 0.6) 0px 4px 15px, rgba(184, 45, 45, 0.15) 0px 0px 10px 0px;
    
    /* Search & Bottom Shadow */
    --search-shadow: rgba(0, 0, 0, 0.4) 0px 2px 8px 0px, rgba(184, 45, 45, 0.2) 0px 0px 0px 1px;
    --border-bottom: rgba(10, 0, 0, 0.7) 0px 10px 10px -10px;
}

[data-theme="quartz-purple"] {
    /* Backgrounds: Tím than pha sắc đá Obsidian (Sâu nhưng rất sạch) */
    --bg-primary: rgba(35, 25, 45, 1);     /* Tím thạch anh đậm */
    --bg-secondary: rgba(48, 35, 60, 1);   /* Sidebar tím rõ rệt, sang trọng */
    --bg-third: rgba(65, 50, 85, 1);       /* Hover bừng lên sắc tím sáng */

    /* Borders: Tím neon nhạt hoặc Ánh bạc để làm nổi bật khối */
    --border-default: 1px solid rgba(180, 140, 255, 0.4); 

    /* Text Colors: Trắng ánh tím và Tím Lilac sáng */
    --main-text: #f4f0fa;       /* Trắng ánh tím (cực kỳ sạch và sáng) */
    --header-text: #d4bfff;     /* Tím Lilac tươi sáng (không bị sến) */
    --color-slate-700: #b8abc7; /* Xám tím bạc cho placeholder */

    /* Shadows: Đổ bóng huyền ảo như ánh cực quang */
    --card-shadow: rgba(0, 0, 0, 0.4) 0px 4px 15px, rgba(180, 140, 255, 0.2) 0px 0px 12px 0px;
    
    /* Search & Bottom Shadow */
    --search-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 0px, rgba(180, 140, 255, 0.3) 0px 0px 0px 1px;
    --border-bottom: rgba(180, 140, 255, 0.2) 0px 10px 10px -10px;
}

[data-theme="univers-blue"] {
    /* Backgrounds: Màu xanh đen sâu thẳm của bầu trời đêm (Sạch và cực sắc nét) */
    --bg-primary: rgba(10, 15, 25, 1);     /* Xanh đen không gian */
    --bg-secondary: rgba(18, 25, 40, 1);   /* Sidebar xanh thẫm, tạo chiều sâu */
    --bg-third: rgba(30, 45, 65, 1);       /* Hover bừng sáng ánh xanh dịu */

    /* Borders: Xanh Cyan hoặc Bạc ánh kim để tạo độ sắc sảo */
    --border-default: 1px solid rgba(86, 180, 233, 0.35); 

    /* Text Colors: Trắng xanh và Xanh Cyan tươi */
    --main-text: #e6f1f7;       /* Trắng ánh xanh (rất sáng và thanh thoát) */
    --header-text: #56d3fe;     /* Xanh Cyan tươi (mạnh mẽ như ánh sao) */
    --color-slate-700: #a1b0c0; /* Xám xanh bạc cho placeholder */

    /* Shadows: Đổ bóng ánh sao (Glow ảo diệu) */
    --card-shadow: rgba(0, 0, 0, 0.5) 0px 4px 15px, rgba(86, 180, 233, 0.15) 0px 0px 10px 0px;
    
    /* Search & Bottom Shadow */
    --search-shadow: rgba(0, 0, 0, 0.3) 0px 2px 8px 0px, rgba(86, 180, 233, 0.2) 0px 0px 0px 1px;
    --border-bottom: rgba(86, 180, 233, 0.1) 0px 10px 10px -10px;
}

[data-theme="gold-obsidian"] {
    /* Backgrounds: Hổ phách sẫm đặc (Hết lỗi nền trắng) */
    --bg-primary: #1e1204;       
    --bg-secondary: #2d1c0a;     
    --bg-third: #462d0f;         

    --border-default: 1px solid rgba(184, 134, 11, 0.5); 

    /* Text Colors: Đẩy độ sáng tối đa cho Main Text */
    --main-text: #ffffff;       /* Trắng tinh khiết - Sắc nét tuyệt đối trên nền tối */
    --header-text: #ffcc33;     /* Vàng Gold sáng hơn một chút để nổi bật tiêu đề */
    --color-slate-700: #d4c4ab; /* Placeholder sáng hơn để dễ nhìn */

    /* Shadows: Hào quang vàng mạnh mẽ hơn */
    --card-shadow: rgba(0, 0, 0, 0.6) 0px 4px 15px, rgba(184, 134, 11, 0.3) 0px 0px 12px 0px;
    
    /* Search & Bottom Shadow */
    --search-shadow: rgba(0, 0, 0, 0.4) 0px 2px 8px 0px, rgba(184, 134, 11, 0.4) 0px 0px 0px 1px;
}