:root {
    /* Màu sắc - Rõ ràng, độ tương phản cao */
    --primary-color: #3b82f6; /* Xanh dương đậm đà */
    --primary-glow: rgba(59, 130, 246, 0.2);
    --text-color: #1e293b; /* Xám đen (Dễ đọc hơn màu đen tuyền) */
    --text-muted: #64748b; /* Xám nhạt cho chữ phụ */
    --success-color: #10b981;
    --danger-color: #ef4444;
    
    /* Nền ứng dụng */
    --bg-app: #f1f5f9; /* Nền xám xanh cực dịu mắt */
    --bg-card: #ffffff; /* Thẻ trắng tinh */
    
    /* Gradient (Chỉ dùng cho các nút quan trọng) */
    --gradient-action: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --gradient-vocab: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --gradient-sentence: linear-gradient(135deg, #10b981 0%, #059669 100%);
    
    /* Đổ bóng phẳng (Flat Shadow) - Không dùng kính mờ nữa */
    --card-border: 1px solid #e2e8f0;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* =========================================
   CHẾ ĐỘ TỐI (DARK MODE)
   ========================================= */
[data-theme="dark"] {
    --bg-app: #0f172a; /* Nền xanh đen sâu thẳm */
    --bg-card: #1e293b; /* Nền thẻ tối */
    --text-color: #f1f5f9; /* Chữ trắng sáng */
    --text-muted: #94a3b8; /* Chữ phụ màu xám nhạt */
    --card-border: 1px solid #334155;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
}

/* Ép các thành phần Header/Nav chuyển tối */
[data-theme="dark"] .app-header, 
[data-theme="dark"] .bottom-nav {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .option-btn {
    background-color: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .search-input {
    background-color: #0f172a;
    border-color: #334155;
    color: white;
}